line-height小结

line-height有很多表现形式，如下

line-height:15px;
line-height:150%;
line-height:1.5;
line-height:1.5em;

很容易产生迷惑：他们之间到底有什么区别呢？

值	描述
normal	默认。设置合理的行间距。
numbe	设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

看了定义后好像还是有点模糊，那么我们就来实践下！

inherit 这个其实没什么说的，继承父元素line-height的值，所以父元素的是多少就是多少。如果其后代元素不设置line-height 的话，也会是这个值。
length 假设设置 line-height 为20px，那么该行的该行的行高就是20px，与 font-size 无关，不会随着 font-size 做相应比例的缩放。这个长度值（20px）会被后代元素继承，所有的后代元素会使用这个相同的、继承的 line-height (20px)，除非后代元素设定 line-height 。

element	font-size	line-height	计算后的lline-height
body	16px	20px	20px
h1	32px	20px	20px

百分比假设自身的 font-size 为16px，line-height 设为120%。那么其行高为：16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。子元素会继承父元素的line-height，那么它继承的是什么呢，百分比（120%）？还是19.2px？答案是后者，19.2px，即父元素line-height计算后的最终值。

element	font-size	line-height	计算后的lline-height
body	16px	120%	19.2px
h1	32px	19.2px	19.2px

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。