以往我们写css时,让一行文字垂直居中.

会设置line-height等于height比如:

当我把这个原理 放在button上时  会是这个样子的.

以下都是火狐浏览器环境

有没有发现一个现象,他们好像并没有垂直居中.

如果你不确定有没有垂直居中再看以一幅图片:

这里把line-height给注释掉.文字会向上移动.

这里如果把height:30px给干掉,只写line-height:30px

通过上图我们发现 在不设置高度的时候,会在line-height上加了两个像素.

现在我们拿一个清理后的button和一个span标签作对比.

<input style="padding:0;margin:0;border: none;background-color: red;font-size: 16px;font-family: '微软雅黑';" type="button" value="默认"/>

        <span style="background-color: red;font-size: 16px;font-family: '微软雅黑';">默认</span>

这个时候我们明显发现在没有设置高度的情况下,按钮总是比普通的标签要高出2个像素

结论:在没有设置高度的情况下,按钮总是比普通的标签要高出2个像素,宽度也是大2个像素,同时在没有line-height限制的前提下,会默认垂直居中.

css中 input的button默认原始的样子的更多相关文章

  1. css中input与button在一行高度不一致的解决方法

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

  2. asp.net中<input type=button>无法调用后台函数

    例如:用<input id="bt1" type="button" runat="server" Onclick="btnL ...

  3. CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习

    CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...

  4. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  5. css取消input、select默认样式（手机端）

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  6. css 中input和select混排对齐问题

    当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,一个vertical-align:middle就可搞定.

  7. css中input框不可点击+首行缩进

    Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...

  8. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  9. HTML中input和button设置同样高度却不能等高的原因

    同样设置35px,input略显高: input加个样式就行 box-sizing: border-box;

随机推荐

  1. Logistic回归分类算法原理分析与代码实现

    前言 本文将介绍机器学习分类算法中的Logistic回归分类算法并给出伪代码,Python代码实现. (说明:从本文开始,将接触到最优化算法相关的学习.旨在将这些最优化的算法用于训练出一个非线性的函数 ...

  2. 基于CSS的幻灯片工具 reveal.js

    官网:http://lab.hakim.se/reveal-js/#/ github  https://github.com/hakimel/reveal.js 更多资源:6个最好的 HTML5/CS ...

  3. Java设计模式（十三） 别人再问你设计模式，叫他看这篇文章

    原创文章,转载请务注明出处 OOP三大基本特性 封装 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏. 继承 继承是指这样一种能力,它可以使 ...

  4. 浏览器功能记住账号和密码解决方法（HTML解决方式）

    1.在input标签里应用html5的新特性autocomplete="off"  注:对chrome不管用.其他浏览器没试. 2.如果是一个输入框那就在当前input标签后面(一 ...

  5. UVa 10410树重建

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  6. UITabBarButton 点击失效问题

    开发过程: 在创建一个UIWindow时,直接在window上添加手势动作. 开发代码: UITapGestureRecognizer *tapRecognizer=[[UITapGestureRec ...

  7. Matlab语法

    第一节 基本数值计算1. 变量:分为数值变量和字符变量 2. 常量:计算机中不变的量.如i.j.pi.NaN(不确定).Inf(无穷大) 3. 字符变量:将字符串作为变量.有三种方法表示:    (1 ...

  8. Codeforces Round #341 Div.2 B. Wet Shark and Bishops

    题意:处在同一对角线上的主教(是这么翻译没错吧= =)会相互攻击 求互相攻击对数 由于有正负对角线 因此用两个数组分别保存每个主教写的 x-y 和 x+y 然后每个数组中扫描重复数字k ans加上kC ...

  9. javascript中call函数与apply

    javascript中的call方法使当前对象可以调用另一个对象的方法,即改变this的指向内容 var first_object = { num: 42 }; var second_object = ...

  10. DTO对象

    在EF中,EF生成的对象都是代理对象,这些对象看上去是实体类对象,但是其实都是EF封装好的代理类对象.所以调用EF查询得到的代理类对象有继承于实体对象,所以可以用实体类对象来接收返回的代理类对象.EF ...