CSS line-height无法完全贴合容器上下边缘的可靠解决方案咨询

我太懂你这个困扰了！相信很多人都踩过line-height的坑——要么设成1让文本紧紧贴住容器边缘，但可读性差到爆炸；要么设个舒服的line-height让阅读友好，结果文本和容器上下边缘总有空隙，和旁边元素对齐时特别别扭，之前用固定像素的负边距hack，改个字体大小或行高直接就失效了，完全不灵活。

先给你拆解下问题根源：字体本身自带内置行间距（font metrics），每个字体文件里都定义了ascent（字符上升到基线以上的高度）和descent（字符下降到基线以下的高度），就算你把line-height设为1，浏览器也会基于这些metrics给文本保留一点默认空隙；当line-height大于1时，额外的空间会均匀分配在文本的上下方，自然就没法贴紧容器边缘了。

下面给你几个可靠的修复方法，再也不用依赖脆弱的固定像素hack：

1. 用CSS原生属性leading-trim（现代浏览器首选） #

这是CSS专门为解决这个问题推出的属性，能直接修剪字体自带的多余行高，让文本视觉边缘精准贴合容器。用法很简单：

.wrap { display: flex; }
.first { background: red; width: 1rem; }
.second {
  line-height: 2;
  leading-trim: both; /* 同时修剪上下的多余间距 */
  text-edge: cap alphabetic; /* 对齐大写字母顶部和常规字母的基线底部 */
}

效果就是字母"A"会完美对齐红色块的顶部，同时多行文本的行间距保持line-height:2的舒适感。注意：目前Chrome、Edge、Safari 16.4+已经支持，Firefox还在开发中，如果需要兼容旧浏览器，可以搭配下面的方法做降级。

2. 基于字体metrics计算自适应负边距（全浏览器兼容） #

如果要兼容不支持leading-trim的浏览器，我们可以通过字体的ascent和descent值，用相对单位计算精准的负边距，这样无论line-height或字体大小怎么变，都能自动适配。

步骤：

• 先获取你所用字体的ascent和descent比例（可以用FontForge等工具查看，或者通过JS动态计算），比如常见的无衬线字体ascent大概是0.85，descent是0.15。
• 用CSS变量和calc计算负边距：

.wrap { display: flex; }
.first { background: red; width: 1rem; }
.second {
  line-height: 2;
  /* 根据你的字体调整这两个值 */
  --font-ascent: 0.85;
  --font-descent: 0.15;
  /* 计算line-height带来的额外空间的一半 */
  --leading-half: calc((var(--line-height, 2) - 1) / 2);
  /* 顶部负边距：抵消line-height的上半空间 + 补全字体ascent到容器顶部的空隙 */
  margin-top: calc(-1 * var(--leading-half) * 1em + (1 - var(--font-ascent)) * 1em);
  /* 底部负边距：抵消line-height的下半空间 + 补全字体descent到容器底部的空隙 */
  margin-bottom: calc(-1 * var(--leading-half) * 1em + (1 - var(--font-descent)) * 1em);
}

这个方法用的是相对单位em，完全依赖字体和line-height的比例计算，不管你把字体改成16px还是24px，line-height改成1.5还是2.5，都能精准对齐，彻底解决固定像素hack的失效问题。

3. 用span包裹文本调整垂直对齐（简单降级方案） #

如果不想搞复杂的计算，也可以用span把文本包裹起来，调整垂直对齐方式：

.wrap { display: flex; }
.first { background: red; width: 1rem; }
.second {
  line-height: 2;
}
.second span {
  vertical-align: top;
  line-height: 1; /* 或者根据需要调整，保证单行对齐 */
}

不过这个方法对多行文本的行间距控制有限，适合单行或对多行要求不高的场景。

内容的提问来源于stack exchange，提问作者Jens Törnell