1.相关概念普及
顶线，中线，基线和底线
直接见下图。inline-block 和 inline 都可以有这四种线。其中，我们重点研究基线，即 base line。基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。
行高
即 line-height，是指同一个元素中，两个文本行基线间的垂直距离。
<div style="width:170px;">
<span style="font-size:16px;line-height:20px;background:red;">
I'm the first line
</span>
<span style="font-size:16px; line-height:40px;background:green;">
I'm the second line
</span>
</div>
比如上图或者下图中两条红线之间的距离。
行距
上行的底线和下一行的顶线之间的距离就是行距，行距的一半称为半行距
字体大小
即 font-size，是指同一行的顶线和底线之间的距离
从下图我们就可以看出
行距、font-size 与行高之间的关系满足
行距 = （行高 - font-size）
当 font-size 等于行高时，行距 = 0，如下图
而当 font-size 大于行高时，行距为负值，则两行重叠，如下图：
CSS boxes 的四种类型
content area （内容区）：
内容区是包围着文字的一种 box，无法显示出来。在没有其他因素 (比如padding) 的影响时，内容区的高度即为 font-size。
inline box (行内框) ：
每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来。在没有其他因素 (比如padding) 的影响时，行内框的高度即为内容区的高度；
设定line-height后，实际改变的是行距，行内框的高度将由内容区变为内容区＋行距。因此，此时会有行内框高度=行高。
line box（行框） ：
行框是指本行的一个虚拟的矩形框，由该行中一个个行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。
行框高度等于本行中所有行内框高度的最大值。当有多行内容时，每一行都有自己的行框。
containing box（包含框）：
包裹着上述三种 box 的 box
2.line-height 的取值方法与继承
一般而言，line-height 只影响行内元素（包括行内替换元素和行内非替换元素，如 img 和 span），并不能直接应用于块级元素。但是 line-height 具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效。
一般情况下，浏览器默认的 line-height 为 1.2。可以自定义 line-height 覆盖这个初始值，那么该怎样设置 line-height 呢？有以下 5 种方式：
| 值 | 描述 |
|---|---|
| normal | 默认。浏览器会自行设置合理的行间距。 |
| 纯数字 | 设置数字，line-height=此数字×当前字体大小。 |
| 数字＋px | 设置固定的行间距。 |
| 数字＋% | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
line-height 是个可继承属性，它的继承规则比较复杂。需要提前说明的是：line-height 的大小与 font-size 息息相关，除了指定 line-height 为多少 px，剩下的设置方式都是基于 font-size 算出来的。下面一一解释。
inherit：
继承父元素 line-height 的值，所以父元素的是多少就是多少。 如果其后代元素不设置 line-height 的话，也会是这个值。
数字＋px：
假设设置 line-height 为 20px，那么该行的行高就是 20px，与 font-size 无关，不会随着 font-size 做相应比例的缩放。 这个长度值（20px）会被后代元素继承，所有的后代元素会使用这个相同的、继承的 line-height (20px)，除非后代元素设定 line-height 。
数字＋％：
假设自身的 font-size 为 16px，line-height 设为 120%。那么其行高为：16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的 line-height，它继承的不是百分比而是父元素 line-height 计算后的最终值。
normal：
假设设置 line-height 为 normal，则会根据浏览器的解析情况给元素分配一个倍数，一般是 1.2，即 line-height 为字体的1.2 倍。与上一个不同的是，其子元素不再继承其 line-height 计算后的最终值，而是根据子元素自身的 font-size 进行计算。见下表：
| element | font-size | line-height | 计算后的 line-height |
|---|---|---|---|
| body | 16px | normal | 16px * 1.2 = 19.2px |
| h1 | 32px | normal | 32px * 1.2 = 38.4px |
- 纯数字/缩放因子 ：如果既想要 normal 的灵活，又想设置一个自定义的值，那就要用纯数字。纯数字方式与 normal 唯一的不同，在于数值的大小不一定是 1.2，而是完全由你自己决定。同样地，其子元素不是继承其 line-height 计算后的最终值，而是根据子元素自身的 font-size 进行计算。见下表：
| element | font-size | line-height | 计算后的 line-height |
|---|---|---|---|
| body | 16px | 1.5 | 16px * 1.5 = 24px |
| h1 | 32px | 1.5 | 32px * 1.5 = 48px |
总结如下：
| 设置方式 | line-height | 计算后的line-height | 子元素继承的 line-height |
|---|---|---|---|
| inherit | 父元素的line-height值 | 不用计算 | 父元素的 line-height 值 |
| 数字＋px | 20px | 不用计算 | 20px |
| 数字＋% | 120% | 自身font-size (16px) * 120% = 19.2px | 继承父元素计算后的line-height值 19.2px，而不是120% |
| normal | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px |
| 纯数字 | 1.5 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
那么，哪一种是最好的方式呢？ 一般来数，设置行高的值为纯数字是最推荐的方式，因为其会随着对应的 font-size 而缩放。
3.line-height 实现垂直居中的原理
通常情况下，div 中的 a 标签包含文本，文本将默认出现在 div 的顶端，如果想要垂直居中，可以设置 div 的高度等于行高，由于行高不直接作用于块状元素且行高可以继承，所以实际上等效于设置 a 的行高等于 div 的高度。
a 的行高即 a 的行内框高度，即内容区＋行距。行高默认是浏览器分配的 1.2，由于此时重新设置了行高，所以行距跟着改变，所以内容区上下往外延伸，即行内框整体延伸。但是，文字始终在行内框里垂直居中，行内框延伸的终点是 div 的高度，也就是延伸至行内框高度等于 div 高度。此时，文本自然会在 div 中垂直居中。