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。

 

posted @ 2017-08-02 09:34  kiera  阅读(1113)  评论(0编辑  收藏  举报