配了八年排版，今天终于把「字母盒」和「视觉盒」这件事彻底分清楚了——text-box-trim 把字间距的糊涂账彻底变了

给按钮加了 padding: 12px，上下看起来就是不一样——这不是你写错了，是字体本来就给上下各留了看不见的空间。half-leading，这个名字我配了八年排版，今天终于知道它叫什么了。Firefox 154 把这件事彻底原生化了。

字体的盒子和眼睛看的盒子不是一回事

每套字体文件里，都有一堆看不见的度量空间：字母顶部要给重音符号留位置，底部要给 p、q、y 这些下行字母留位置。你写的 padding: 12px，浏览器是从字体”度量盒子”的边开始算的，不是从字母本身的边算的。结果就是：上下明明是相同的数值，看起来却是上面空一截、下面紧一截。

传统解法：每个字体调一套 padding

配过按钮的同学都知道这个流程：上 10px、下 14px，眯眼看看，不对，再调。用的是 line-height fudge——把 line-height 压到 1.1、1.15，补偿那部分看不见的空间。但这个值是跟着字体走的：换套字体，整个数字全得重来。

三行代码，把这件事彻底变了

button {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  padding: 12px;
}

text-box-trim 告诉浏览器：我要裁掉上下两端的空间。text-box-edge 告诉它：裁到字母顶（cap）和基线（alphabetic）为边界。换句话说——现在 padding 是从你能看见的字母边缘开始算的，不是从字体度量开始算的。

这对哪些场景影响最大？

按钮、徽章、胶囊标签。这类组件本身高度不大，half-leading 占的空间比例最高，调起来最费劲。以前要针对每个字体单独调 padding，换字体后几乎必重新调；现在一套代码通杀。视觉居中也是受益场景：图标和文字放一行，文字盒比字母盒高出一截，两者永远对不齐——trim 掉就好了。间距也准了：gap 和 margin-block 现在描述的是读者实际感知到的空间，而不是空间减去一个字体相关的常数。

Firefox 154 之后，所有主流浏览器都支持了

Chrome 133+、Edge 133+、Safari 18.2+ 已经内置，Firefox 154（2026 年 8 月 18 日发布）默认开启。这个时间点意味着 text-box-trim 正式进入 Baseline newly available 状态，跨浏览器行为基本一致。

用起来没有后顾之忧：不认识的浏览器直接忽略这行声明，按原来的方式渲染；想保守一点可以加 @supports 特性检测。但实际上直接用大多数情况下就够了，渐进增强的失败模式对 CSS 来说最友好。

配了八年排版，每次微调按钮文字的垂直居中，心里都清楚那个数字是”试出来的”，不是”算出来的”。今天终于不用试了。