取值
一般情况下，浏览器默认的line-height为1.2。可以自定义 line-height 覆盖这个初始值，那么该怎样设置line-height呢？有以下5种方式：
| 值 | 描述 |
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
继承
需要提前说明的是：line-height的大小与font-size息息相关，除了指定line-height为多少px，剩下的设置方式都是基于font-size算出来的。 下面逐个讲一讲~
-
inherit 这个其实没什么说的，继承父元素
line-height的值，所以父元素的是多少就是多少。 如果其后代元素不设置line-height的话，也会是这个值。 -
length 假设设置 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，那么它继承的是什么呢，百分比（120%）？还是19.2px？ 答案是后者，19.2px，即父元素
line-height计算后的最终值。 -
normal line-height 设置为 normal 的时候，行高取决于浏览器的解析，一般是1.2。 与前面不同的是，line-height 设置为 normal 的元素，其子元素不再继承其line-height计算后的最终值，而是根据子元素自身的 font-size 进行计算。见下表~
| element | font-size | line-height | 计算后的lline-height |
| body | 16px | normal | 16px * 1.2 = 19.2px |
| h1 | 32px | normal | 32px * 1.2 = 38.4px |
可见，子元素随着自身 font-size 的大小而做相应比例的缩放。
-
纯数字 如果既想要 normal 的灵活，又想设置一个自定义的值，那就要用
纯数字啦~ 纯数字方式与 normal 唯一的不同，就是数值的大小，纯数字可以自己随意设定，而 normal 的值是浏览器决定的。
| element | font-size | line-height | 计算后的lline-height |
| body | 16px | 1.5 | 16px * 1.5 = 24px |
| h1 | 32px | 1.5 | 32px * 1.5 = 48px |
其后代元素会继承这个数值（比如 1.5），然后根据自身的 font-size 算出自身的line-height。
继承总结如下：
| 设置方式 | line-height | 计算后的line-height | 子元素继承的line-height |
| inherit | 父元素的line-height值 | 不用计算 | 父元素的line-height值 |
| length | 20px | 不用计算 | 20px |
| %(font-size:16px) | 120% | 自身font-size (16px) * 120% = 19.2px | 继承父元素计算后的line-height值 19.2px，而不是120% |
| normal(font-size:16px) | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px |
| 纯数字(font-size:16px) | 1.5 | 自身font-size (16px) * 1.5 = 24px | 继承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
那么，哪一种是最好的方式呢？ 一般来数，设置行高的值为 纯数字 是最推荐的方式，因为其会随着对应的 font-size 而缩放。