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%的狀況來算的。