line-height 和 font-size的关系

line-height支持属性值设置为无单位的数字，有无单位在子元素继承属性时有微妙的不同。

语法

line-height: normal | <number> | <length> | <percentage>

可能的值：

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

比较特殊的地方就在于，当line-height的值为number时，

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

比如：

<div style="line-height:1.5;font-size:20px;">
    老爹容器
    <div style="font-size:30px;">
        子盒子<br />
        line-height行高问题
    </div>
</div>

如图，子容器的行高为 font-size：30px*1.5 = 45px。

 

转载于:https://www.cnblogs.com/dodocie/p/7265752.html