CSS line-height

css line-height的深入理解

2018年5月11日

1. 行高第一种理解
   行高为文字上下行之间的高度，比如第一行文字顶部（底部）到第二行文字的顶部（底部），这就为行高。
   
   上图是对这种理解经典例图，看起来似乎很容易理解。
   那么我们来思考怎么用这种理解来解释把行高设置为高度以达到文字垂直居中？
   来让我们先理解这几个概念：
   
   可以看到很难用顶部或底部来解释上面那个问题。即使解释出来，也很难理解，并且还要解释为什么文字和顶部的距离会随着顶部（底部）到顶部（底部）的距离变化而变化。

所以我不用这种理解，即便它是对的。

1. 第二种理解
   上图
   
   我把同一行文字看做一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度指定为行高指定的高度。

   并且，把文字看做永久的（绝对的）在行内框的垂直中心处。

   接下来，我来解释为什么把line-height设置为height，文字就会垂直居中。 因为把line-height设置为height，行内框就填充满了它的父元素的height；而文字又是在行内框中绝对垂直居中的，所以文字就会垂直居中了。