<div style="line-height:150%;font-size:16px;">
父親元素內(nèi)容
<div style="font-size:30px;"> Web前端開發(fā)<br />line-height行高問題 </div>
</div>
下圖是當(dāng)line-height:150%的效果，父元素的行高為150%時，會根據(jù)父元素的字體大小先計算出行高值然后再讓子元素繼承。所以當(dāng)line-height:150%時，字元素的行高等于16px * 150% = 24px：
line-height:150%.jpg
下圖是當(dāng)line-height:1.5em的效果，父元素的行高為150%時，會根據(jù)父元素的字體大小先計算出行高值然后再讓子元素繼承。所以當(dāng)line-height:1.5em時，子元素的行高等于16px * 1.5em = 24px：
line-height:1.5em.jpg
下圖是當(dāng)line-height:1.5的效果，父元素行高為1.5時，會根據(jù)子元素的字體大小動態(tài)計算出行高值讓子元素繼承。所以，當(dāng)line-height:1.5時，子元素行高等于30px * 1.5 = 45px：
line-height:1.5.jpg
當(dāng)line-height 為1.5時（即不寫單位），此時叫縮放因子，子元素會繼承父元素的縮放因子值1.5，再根據(jù)子元素的font-size動態(tài)計算出30*1.5=45px
轉(zhuǎn)載自知乎https://www.zhihu.com/question/20394889/answer/18436957
