line-height: 150%，line-height: 1.5，line-height: 1.5em

[wengjq]

https://www.zhihu.com/question/20394889/answer/18436957

line-height: 150%

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

上图是当 line-height: 150% 的效果，父元素的行高为 150% 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当 line-height: 150% 时，字元素的行高等于 16px * 150% = 24px 。

line-height: 1.5em

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

上图是当 line-height: 1.5em 的效果，父元素的行高为 1.5em 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当 line-height: 1.5em 时，字元素的行高等于 16px * 1.5 = 24px 。和上一种情况类似。

line-height: 1.5

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

上图是当 line-height: 1.5 的效果，父元素行高为 1.5 时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当 line-height: 1.5 时，子元素行高等于 30px * 1.5 = 45px。

注意：以上三种情况父元素的 line-height 都是 24px 。