概述

line-height 是 CSS 中用于控制文本行间距的重要属性。虽然 line-height: 1.2 和 line-height: 120% 看似相同，但它们在计算方式上存在关键区别，尤其是在继承和计算值方面。

---

1. 计算方式不同

写法	类型	计算方式说明
line-height: 1.2	无单位（数字）	表示当前元素 font-size 的倍数，最终行高 = font-size * 1.2
line-height: 120%	百分比	表示当前元素 font-size 的百分比，最终行高 = font-size * 1.2

📌 表面上两者结果相同，但在继承行为上会有差异。

---

2. 继承行为的区别

情况说明：

假设父元素设置 font-size: 20px，并设置 line-height，子元素继承该属性但拥有自己的 font-size: 16px。

父级设置	子级继承的值计算方式	示例
line-height: 1.2	子元素的 line-height = 子 font-size * 1.2	子 line-height = 16px * 1.2 = 19.2px
line-height: 120%	子元素的 line-height = 父 font-size * 1.2	子 line-height = 20px * 1.2 = 24px

✅ 使用无单位的数字（如 1.2）更推荐，因为它会根据子元素的字体大小动态调整，避免出现意料之外的行高。

---

3. 示例对比

HTML

<div class="parent">父元素<div class="child">子元素</div>
</div>

CSS

.parent {font-size: 20px;/* line-height: 1.2; */line-height: 120%;
}.child {font-size: 16px;
}

line-height 设置	父元素行高	子元素行高
1.2	24px	19.2px
120%	24px	24px

---

4. 使用建议

场景	推荐写法	说明
构建可继承、响应式布局	line-height: 1.2	更灵活，基于子元素字体大小计算
固定行高，不希望被子元素影响	line-height: 120% 或 px	行高固定，继承时不会变化

---

总结

特性	line-height: 1.2	line-height: 120%
是否单位	无单位	百分比
基于字体大小计算	是（当前元素）	是（继承自父元素）
继承行为	更灵活，推荐使用	行高固定，易出问题

✅ 结论：在大多数情况下，推荐使用 line-height: 1.2 来确保更好的可维护性和继承行为可控。