line-height 的四种值

line-height 决定一行文字占多高。它的四个取值里，有三个看起来差不多，但在继承时行为完全不同——这是 CSS 里最常被踩的一个坑。

四种值#

继承上的差别才是重点#

假设父元素：

.parent {
  font-size: 16px;
  line-height: 1.5;      /* 或 24px，或 150% */
}
.child {
  font-size: 32px;
}

也就是说：只有无单位数字是「按比例」传下去的，长度与百分比在父元素那里就被算成了绝对值，再原样继承。

这就是「父级写 line-height: 1.5，标题放大字号后行距却不对」的两种成因：要么父级写的是 150% / 1.5em，要么标题自己又设了一个固定值。

行框是怎么搭出来的#

一行文字的高度不是字形的实际高度，而是一个行框（line box）：

1. 取字体的上伸与下伸，得到内容的自然高度；
2. 用 line-height 减掉这个高度，剩下的空隙上下各分一半（叫 half-leading）；
3. 所有行内盒按 vertical-align 对齐到基线上，行框取最高者。

所以 line-height 变大时，文字是上下各撑开一点，而不是只往下推——这也是为什么两个不同字体混排时，即使 line-height 相同，视觉上的行距也可能不同：它们的分母（字体上伸下伸）不一样。

normal 到底是什么#

normal 不是「1.2」，而是「由浏览器按字体度量算一个值」。规范给的是一个推荐算法（用字体的升部、降部与 lineGap），具体数值因浏览器与字体而异。

所以别把 normal 当常量：同一份 CSS 在 Chrome、Safari、Firefox 上可能得到不同的行距；换字体也会变。

实践写法#

:root {
  --leading-tight: 1.25;
  --leading-normal: 1.6;
}

body {
  font-size: 1rem;
  line-height: var(--leading-normal);
}

h1,
h2,
h3 {
  line-height: var(--leading-tight);
}

• 根元素用无单位数字，全站比例一致；
• 大标题单独给一个更紧的倍数（字号越大，需要的相对行距越小）；
• 需要精确对齐网格时（比如设计稿要求每行 24px），才用长度，并且要在所有影响字号的层上一起算。

和字体的关系#

字体文件里的 hhea.ascender / descender / lineGap（以及 OS/2 里的两组度量）决定了「1 倍行高」的自然高度。想弄清为什么某个字体在高行高下显得松散，看 head / hhea / post。

延伸阅读#

• MDN：line-height
• CSS Inline Layout 规范：行框与 half-leading