行高的取值（扩展）👌

line-height 属性用于设置行高，是控制文本垂直间距的重要属性。通常在父元素上设置，子元素会继承父元素的行高值。

1. 像素值（px）

使用固定的像素值设置行高，不会随字体大小变化而变化。

特点：

• 固定值，不受字体大小影响
• 适用于需要精确控制的场景
• 常用于单行文本的垂直居中对齐

示例：

/* 单行文本垂直居中 */
.center-text {
  height: 50px;
  line-height: 50px; /* 行高等于容器高度 */
}

2. 无单位数字（推荐）

使用纯数字表示当前元素字体大小的倍数，这是最灵活和推荐的方式。

特点：

• 继承机制：先继承数字值，再根据当前元素的字体大小计算
• 响应式友好，会随字体大小自动调整
• 避免了继承问题

示例：

.parent {
  font-size: 16px;
  line-height: 1.5; /* 子元素继承1.5这个数字 */
}

.child {
  font-size: 20px; /* 实际行高 = 20px × 1.5 = 30px */
}

3. em 单位

相对于当前元素字体大小的倍数，但继承的是计算后的像素值。

特点：

• 计算过程：先根据当前元素字体大小计算出像素值，再继承像素值
• 可能导致继承问题
• 相对灵活，但不如无单位数字

示例：

.parent {
  font-size: 16px;
  line-height: 1.5em; /* 计算为 16px × 1.5 = 24px */
}

.child {
  font-size: 12px; /* 继承24px的行高，可能不合适 */
}

4. 百分比（%）

相对于当前元素字体大小的百分比，继承机制与 em 类似。

特点：

• 计算方式与 em 相同
• 先计算出像素值，再继承像素值
• 使用相对较少

示例：

.text {
  font-size: 16px;
  line-height: 150%; /* 等同于 16px × 1.5 = 24px */
}

对比继承机制

/* 推荐：无单位数字 */
.parent {
  font-size: 16px;
  line-height: 1.5; /* 子元素继承1.5 */
}
.child {
  font-size: 12px; /* 行高 = 12px × 1.5 = 18px */
}

/* 不推荐：em单位 */
.parent {
  font-size: 16px;
  line-height: 1.5em; /* 计算为24px，子元素继承24px */
}
.child {
  font-size: 12px; /* 行高仍为24px，可能过大 */
}

总结

取值类型	继承方式	适用场景	推荐度
无单位数字	继承数字，再计算	大部分场景	⭐⭐⭐⭐⭐
px	继承像素值	精确控制、单行居中	⭐⭐⭐
em	先计算，再继承像素值	特定组件	⭐⭐
%	先计算，再继承像素值	较少使用	⭐

核心要点：

• 优先使用无单位数字，避免继承问题
• 正文内容推荐 1.4-1.6 的行高
• 标题可使用 1.1-1.3 的紧凑行高
• 按钮等 UI 元素可使用固定像素值或 1.0