以往我们写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限制的前提下,会默认垂直居中.