标签： css-知识点
从下面这个题目入手分析 line-height 属性值为不同单位时的区别;
想要让站点内文字默认为双倍行距。下面哪个
line-height值是最佳实现方式？
- 200%
- 2em
- 2 (无单位)
正确答案为 2 (无单位)
下面的内容摘自 https://www.zhihu.com/question/20394889/answer/18436957
<div style="line-height: 150%;font-size: 16px;">
父元素内容
<div style="font-size: 30px;">
web前端开发<br/>
line-height行高问题
</div>
</div>
当父元素的行高为 line-height:150% 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。
所以当父元素 line-height:150% 时，子元素的行高等于 16px * 150% = 24px。效果如下图:
父元素 line-height:150% 时
当父元素的行高为 line-height:1.5em 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。
所以当父元素 line-height:1.5em 时，子元素的行高等于 16px * 1.5em = 24px。效果和 line-height:150% 相同。效果如下图:
父元素 line-height:1.5em 时
当父元素的行高为 line-height:1.5 时，会根据子元素的字体大小动态计算出行高值让子元素继承。
所以当父元素 line-height:1.5 时，子元素行高等于30px * 1.5 = 45px。
父元素 line-height-1.5 时
总结：
- 当
line-height的属性值有单位时（包括百分比），子元素继承了父元素计算得出的行距；- 当
line-height的属性值无单位时继承了系数，子元素会分别计算各自的行高（推荐使用）；
所以确保将line-height指定为一个无单位的数值；这样一来，不同字体大小的子元素将会继承这个数值而不是一个固定的行高值。
