line-height概念

先来看看MDN里对于line-height的定义，来帮大家有个初步的概念认识。

line-height属性用于设置行所需要的空间，例如文本。对于块级元素，它指定元素中线框的最小高度。在未替换的内联元素中，它指定用于计算线框高度的高度。对于替代行内元素，如 button 或其他 input 元素，line-height 没有影响（原文未提到，对于部分替代元素，line-height 依然可以影响元素的样式布局）。

怎么样，看完MDN的解释以后明白了吗？还是依旧一头雾水？那么，来看看我对于它的理解吧。

我的解读

先说一个大家都熟知的现象，我们知道div的高度是由里面文档流元素的内容撑开的。如果一个空div里面打入了一个空格或是文字，则此div就会有一个高度。那么这个高度是什么呢？并不是很直观的font-size，而是line-height。

要证明这一点很简单，做一个对比即可。

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:20px; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}

image.png

大家可能会发现上面示例中明明font-size和line-height设置了一样的大小，但似乎上下还有间隙，这就是line-height的另一个大坑了，一个小栗子献上。

.test{
  font-size:20px; 
  line-height:20px; 
  border:1px solid #cccccc; 
  background:#eeeeee;}

image.png

怎么样？爽不爽？字体从边框里面出来了哦。这里就需要搬运一下方方知乎文章里的讲解了。

image.png

一个内联元素有两个高度：content-area 高度和 virtual-area （实际区域？）高度
（virtual-area 是我自己发明的单词，它表示对人类有效的高度，你在其他地方是看不到这个单词的）；

content-area的高度是由字体度量定义的（font-size的坑，感兴趣的自己爬）；

vitual-area的高度就是 line-height，这个高度用于计算 line-box 的高度；

virtual-area和content-area高度的差异叫做 leading。leading 的一半会被加到 content-area 顶部，另一半会被加到底部。因此 content-area 总是处于 virtual-area 的中间。
计算出来的 line-height（也就是 virtual-area 的高度）可以等于、大于或小于 content-area。如果 virtual-area 小于 content-area，那么 leading 就是负的，因此 line-box 看起来就比内容还矮了。
（其实就是说line-height高度是以中间线为基准上下均分，而font-size是根据其字体基线进行高度分配，当两者数值一致的时候因为分配原则不同自然出现上下边界不一致）