对 line-height 属性值的单位的研究

标签： 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 指定为一个无单位的数值；这样一来，不同字体大小的子元素将会继承这个数值而不是一个固定的行高值。