先来栗子感受下这两者的视觉区别:

line-height: 1.5

我的行高是1.5
我的行高是1.5

line-height: 150%

我的行高是150%
我的行高是150%

line-height: 1.5em

我的行高是1.5em
我的行高是1.5em

结论

当父元素的行高为150%或1.5em时,会根据父元素的字体大小先计算出行高值然后再让子元素继承;所以当父元素的font-size:14px,子元素的font-size:30px时,子元素的行高为14px * 1.5 = 21px;

而父元素的行高为1.5时,则根据子元素的字体大小动态计算出行高值让子元素继承;所以当父元素的font-size:14px,子元素的font-size:30px时,子元素的行高为30px * 1.5 = 45px。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/247