37. line-height: 1.2 与 line-height: 120% 的区别
概述
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来确保更好的可维护性和继承行为可控。