配了八年排版，每次调整字体大小都要重新算一遍负 margin——今天 CSS 自己会修了

你给一个按钮写 padding: 12px，设计稿上看起来居中了，上线之后却总觉得底部偏重。于是你拆成 padding: 10px 12px 14px，眯着眼睛微调了两个数字，次日设计师换了个字体——那组数全废了。

这不是你的手感差。是字体本来就会在可见字符上下各留一段「看不见的空白」，而浏览器把这段空白也当作了文本高度的一部分。这件事从 CSS 诞生起就没被好好解决过，直到 Firefox 154。

看不见的空白从哪来

数字字体文件里不只有字母。上面要留空间给带重音符号的大写字母，下面要给 g、y、p 这些下伸字符留位置。这部分空间叫 font metrics，浏览器渲染时会把整段空间都算进行盒高度，不管你的文本里有没有任何一个带重音的字母或下伸字符。

再加上 CSS 的半领先（half-leading）机制——line-height 会等分一半到文本上方、一半到下方——最终结果就是：一个 12px 的文字，行盒可能有 16px、18px，甚至更多，取决于具体字体和字号。

这就是为什么 padding: 12px 的按钮视觉上偏下了：你在给一个比你想象中更高的盒子做均分布局。

两行 CSS 把这件事修了

Firefox 154（2026-08-18）把 text-box 及两个子属性正式支持，Chrome 133+、Safari 18.2+、Edge 132+ 均已支持，全球覆盖率超过 80%，正式进入 Baseline 2026 newly available 行列。

三者的分工很清晰：

• text-box-trim 指定修哪侧：trim-start（上）、trim-end（下）、trim-both（两侧）、none（不修）
• text-box-edge 指定修到哪个度量线：cap（大写字母顶部）、ex（小写 x 顶部）、alphabetic（基线）、text（字体自己的文本边缘）
• text-box 是简写，两个值用空格连着写

实战里你大概率只用一个组合：

.btn {
  padding: 12px 20px;
  text-box: trim-both cap alphabetic;
}

trim-both 修上下两侧，cap 修到字母顶部，alphabetic 修到基线。这条规则的效果是：文本的「可见字母范围」严格对齐按钮的 padding 区域，视觉上真正居中了。换字体？换字号？浏览器自己读字体度量，数字不用动。

旧方法为什么碎了

最常见的解法是手动拆 padding：把垂直方向的 padding 拆成不对称的值，或者用负 margin 把行盒往上拽。这两个做法有一个共同缺陷：依赖特定字体，字体一换，数字全部失效。

另一个常见做法是直接量设计稿的像素值，然后在 CSS 里写死。但当设计师换了一个 line-height 或者调整了字号，这些硬编码值就成了积累的技术债，每次改版都要重新过一遍。

text-box-trim 的本质区别在于：它是字体感知的。浏览器直接读字体的 OpenType 度量信息，不再靠人肉补偿。

这些场景受益最大

不是所有文本都需要这个属性。段落正文本来就需要行间距来提升可读性，半领先在里面起正向作用。

真正高频的场景是这几类：

按钮和标签。视觉居中是最基础的设计诉求，但 padding 均分布局在字体层面从来就不是真正的居中。

与图标对齐。一个 40px 高的头像旁边放一行文字，没有 trim 时文字行盒比头像高出一截，两者视觉上线不对齐。Trim 之后，行盒高度等于字母高度，两个元素天然对齐。

Hero 大标题。设计师给出的上下留白是「字母上下留白」，不是「行盒上下留白」，trim 之后你的 gap 和 margin 才真正描述的是读者实际感受到的空间。

多行文本只在首尾 trim

值得注意的细节是：text-box-trim 只作用于第一行和最后一行，中间各行的 line-height 不受影响。这符合排版逻辑——段落内部的行间距本来就是给阅读留呼吸空间的，修掉反而会挤。

一个 WCAG 注意点

Trim 会移除不可见的 half-leading，而 half-leading 曾经隐形地贡献了按钮的点击区域高度。如果你 trim 了一个按钮而没有补回对应的 padding，可能无意中把可点击区域缩到了 WCAG 2.2 要求的 24×24 CSS 像素以下。渐进增强写法：

.tag {
  padding: 6px 12px; /* fallback */
}
@supports (text-box: trim-both cap alphabetic) {
  .tag {
    text-box: trim-both cap alphabetic;
    padding: 10px 12px; /* 补回 trim 的那部分 */
  }
}

下一步

Firefox 154 意味着四大浏览器全部就位。如果你团队的设计系统里有大量按钮、标签、Badge 这类「小而固定尺寸的文本组件」，这周就可以把设计稿翻一遍，把那些「手工微调的 padding」标记为技术债，用 text-box: trim-both cap alphabetic 一行替换。

不需要 polyfill，不支持的浏览器会忽略这行声明——降级表现只是「保持原来的偏下感」，不会坏任何东西。这是 CSS 最温和的渐进增强。