网页功能：
text-box
问题
浏览器会自动在文本字符上方和下方添加额外的空白，以适应行高和特定于字体的指标（例如上出头和下出头）。这种“幽灵空间”导致无法使用标准 CSS 实现像素级完美的垂直对齐。
常见问题包括：
- 图标未对齐：即使使用
align-items: center，文字在视觉上也会比相邻图标低或高。 - 内边距不准确：由于字体的内部行距，
padding: 12px按钮在视觉上看起来顶部或底部有更多空间。 - 齐平对齐：如果不使用“幻数”负外边距，您将无法使大写字母的顶部与容器或相邻图片的顶部完全对齐。
解决方案
text-box-trim 和 text-box-edge 属性（简写为 text-box）可让您根据特定字体指标剪裁此内部行距。通过将文本框剪裁到大写字母高度（大写字母顶部）和字母基线（大多数字母底部），您可以确保元素的边界框与其视觉内容相匹配。
实施策略
- 强制性要求：将
text-box-trim: trim-both（或text-box简写形式）应用于包含文本的元素。 - 强制性：使用
text-box-edge指定要用于修剪的指标。对于大多数界面对齐，请使用cap alphabetic。 - 使用此属性可在 Flex 或 Grid 容器中实现视觉上的垂直居中。
- 务必使用它来确保 CSS
padding值与文本和容器边缘之间的视觉间距相匹配。 - 请勿在长篇正文中使用，因为长篇正文需要传统的行距来确保可读性。最适合用于标题、按钮和界面标签。
实现指南
用例 1：剪裁徽章的内部前导
不同字体在文本上方和下方具有不同的内置间距。这可能会导致难以匹配设计，或难以在视觉上将文本居中放置在标记中。如果您希望容器的内边距正好贴合文本，请使用 text-box: trim-both cap alphabetic。这对于密集型界面组件（例如标记或标签）特别有用。这样，内边距就可以从文本边缘开始，向四周延伸。
.badge {
padding: 10px;
background: hotpink;
border-radius: 10px;
/*
Trims the top to the cap-height and
the bottom to the alphabetic baseline.
*/
text-box: trim-both cap alphabetic;
}
应用场景 2：文本居中，图标位于两侧
使用 Flexbox 对齐文本和图标时，“幽灵空间”通常会使文本看起来略微偏离中心。剪裁文本框可确保布局引擎使用实际可见的字母高度进行对齐。
.button {
display: inline-flex;
align-items: center;
gap: 8px;
}
/*
text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
/*
The flex container now centers against the
visible letters, not the invisible font box.
*/
text-box: trim-both cap alphabetic;
}
应用场景 3：使文本与顶部边缘对齐
如需使标题与相邻图片或装饰元素的顶部完美对齐，请使用 trim-start cap alphabetic。即使不剪辑结尾，也必须定义结尾边缘。
.hero {
display: flex;
align-items: flex-start;
}
h1 {
/* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
text-box: trim-start cap alphabetic;
}
最佳做法
- 务必使用
text-box简写形式以保持简洁：text-box: <trim-direction> <edges>。 - 务必始终指定两个边缘，即使只剪裁一个边缘也是如此（除非使用默认的
text边缘）。 - 务必与
line-height结合使用，以控制间距。剪裁会移除文本首行和末行之前的行距，但line-height仍会影响多行文本中各行之间的距离。 - 请勿对每个元素都应用。请仅在需要精确对齐时使用。
后备策略
text-box 是一项渐进增强功能。在不支持该属性的浏览器中，文本将直接以默认行距呈现。您的布局仍可正常运行，但精确度会略有降低。无需特殊的后备代码，因为旧版浏览器会安全地忽略这些属性。
其他注意事项
- 字体指标：不同的字体具有不同的内部指标。
cap alphabetic是可靠的默认值，但某些字体或用例可能需要ex（x 高度）才能更好地对齐小写字母。 - 多行文本：剪裁会应用于文本块的第一行和最后一行。内部线路不受影响。