首先需要明确的是line-height是作用在行内元素或者是行内块级元素上的，我们声明在块级框上的line-height实际也是作用于块级框中的内容的，因此经常可能看到会这么使用：
div { line-height: 100px; font-size: 20px;
}
于是看到了这样的效果：
可能下意识的就以为line-height就是作用在块级盒子上的。实际上呢，他是作用于块级盒子中的文本上的，如果去除 div 中的文本就会看到其高度就没有 100px 了，文本也是行内元素，这点想必都是清楚的。
另外则是line-height的值可以为数值、百分比以及长度值，长度值也包括例如em这样的相对单位。当值不是具体长度值的时候，也就是为数值或者是百分比的时候，相对计算的是其font-size属性，如果font-size的值为16px，则line-height: 1.5的值就为16 * 1.5，就是24px，百分比值的时候也是这么计算的，不过需要注意的是，百分比值在继承的时候，会相对当前的font-size来计算，也就是说如果父子元素的font-size值不同，那么line-height计算出来的值也是不一样的。如果数值的话则没有这个问题，始终都是相对于数值来计算的。
另外经常会看到这样的用法，让文字垂直居中：
div { line-height: 100px; height: 100px;
}
实际就是只需要line-height就能实现垂直居中，和下面的高度没有什么关系，而为什么这么设置可以垂直居中呢？这就要来看line-height设置的属性究竟如何作用的。还是来看上面的图，当设置line-height的时候，div 的高度就被设置为了 100px，但是这个值是这么分配的，用100px - 1em得到的值分成两份，分别加到字体的上部分和下部分的区域，这样字体就平分上下区域，形成一种垂直居中的情况，1em就是字体的大小。当然这里其实是近似的垂直，因为不同字体实际占据的1em的大小是不一样的，因此分配上下半行高的时候，会有存在偏差，除此之外，下面说的一种属性也会影响到这种情况。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css