平时我经常使用如下代码来使文本在垂直方向居中对齐:
.demo {
font-size:18px;
height:30px;
line-height:30px;
}
这就是常见的文本垂直居中的方式。但是在最近,我发现了一个问题,line-height到底指定的是元素那一部分的高度呢?
比如,这段代码中div的高度是多少呢?
<div>test</div>
div {
line-height:400px;
box-sizing:border-box;
border:1px solid #ccc;
}
它的高度其实是402px,甚至去掉box-sizing:border-box也是402px,也就是说div的高度与div的盒模型没有关系。
这里的原因其实也很简单,div是被文字撑开的,文字是400px高,加上上下border就是402px了。
所以以后再写文字垂直居中时,在有上下边框的情况下,并且同时修改了box-sizing为border-box时,line-height要减去边框的宽度。如下:
.demo {
font-size:14px;
border:1px solid #ccc;
height:30px;
line-height:28px;
box-sizing:border-box
}
height可以省略吗?
很多次,在单行文本的情况下,我只用line-height,省略了height。但是,最近项目中出现了一些bug,具体来讲,是在使用element个别组件的时候,如el-autocomplete,浮动布局出现问题,当加上height后问题解决了。
line-height是如何继承?
这是个有趣的问题,line-height 属性为数值(eg:1.5,2)时,line-height 会被子元素继承。
当其为百分比值或长度(eg:1.5em,20px)时则不会被继承。
line-height 的默认值是多少?
主要和字体有关,也极轻微的受到浏览器的影响(很小,0.01级别)。