line-height 的继承与计算

line-height 三种取值方式的继承行为差异

问题

line-height 可以设置为百分比、数值、长度三种形式，它们在继承时有什么区别？

解答

三种取值方式

/* 1. 长度值 */
line-height: 20px;

/* 2. 百分比 */
line-height: 150%;

/* 3. 纯数值 */
line-height: 1.5;

继承行为的差异

<style>
  .parent {
    font-size: 20px;
  }
  .child {
    font-size: 14px;
  }
</style>

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

长度值：直接继承计算后的值

.parent {
  font-size: 20px;
  line-height: 30px; /* 固定值 */
}
.child {
  font-size: 14px;
  /* 继承 line-height: 30px */
}

百分比：继承计算后的值

.parent {
  font-size: 20px;
  line-height: 150%; /* 计算为 20px * 150% = 30px */
}
.child {
  font-size: 14px;
  /* 继承 line-height: 30px，不是 150% */
  /* 行高相对字体过大 */
}

纯数值：继承数值本身

.parent {
  font-size: 20px;
  line-height: 1.5; /* 实际为 20px * 1.5 = 30px */
}
.child {
  font-size: 14px;
  /* 继承 line-height: 1.5 */
  /* 实际为 14px * 1.5 = 21px */
}

完整对比示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      gap: 20px;
    }
    .box {
      width: 200px;
      background: #f0f0f0;
      font-size: 20px;
    }
    .child {
      font-size: 12px;
      background: #e0e0e0;
    }
    
    /* 三种不同的 line-height 设置 */
    .px .box { line-height: 30px; }
    .percent .box { line-height: 150%; }
    .number .box { line-height: 1.5; }
  </style>
</head>
<body>
  <div class="container">
    <!-- 长度值 -->
    <div class="px">
      <div class="box">
        父元素 20px
        <div class="child">子元素 12px，继承 30px 行高</div>
      </div>
    </div>
    
    <!-- 百分比 -->
    <div class="percent">
      <div class="box">
        父元素 20px
        <div class="child">子元素 12px，继承 30px 行高（150% 已计算）</div>
      </div>
    </div>
    
    <!-- 纯数值 -->
    <div class="number">
      <div class="box">
        父元素 20px
        <div class="child">子元素 12px，继承 1.5，行高为 18px</div>
      </div>
    </div>
  </div>
</body>
</html>

继承结果对比表

设置方式	父元素 (font-size: 20px)	子元素 (font-size: 12px)
`30px`	30px	30px
`150%`	30px	30px（继承计算值）
`1.5`	30px	18px（继承系数）

关键点

长度值：子元素直接继承固定的像素值
百分比：先计算再继承，子元素继承的是父元素计算后的结果
纯数值：继承数值本身，子元素根据自身 font-size 重新计算
推荐使用纯数值：避免子元素行高与字体大小不匹配的问题
line-height: 1.5 比 line-height: 150% 更灵活，是最佳实践