CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

 

代码：
<div style="line-height:150%;font-size:16px;">
    父元素内容
    <div style="font-size:30px;">
        Web前端开发<br />
        line-height行高问题
    </div>
</div>

其实区别就在于继承的问题上。

150%是先计算后继承，根据父元素的字体大小计算出行高，而且子元素依然沿用这个计算后的行高：子元素的行高 = 16*150% = 24px; 所以字体显示不全。

---

 

1.5则是先继承后计算（无单位参数），根据子元素本身字体的大小去乘以1.5来计算行高 ： 子元素的行高 = 30*1.5 = 45px；所以字体显示彻底。

---

 

另，1.5em等也是按照150%的状况来算的。