text-box で文字の上下の余白を削り、見た目どおりの padding にする
text-box: trim-both cap alphabetic でフォント固有の上下余白を削り、ボタン等の padding を見た目通りにする。
どんな時に使う？
フォントの行ボックスには大文字の上・ベースラインの下に余白（ハーフレディング等）があり、padding: 24px のボタンでも見た目の余白はもっと大きく、上下で不均一になる。デザインカンプとピクセル単位で合わせたいとき、テキストの縦中央揃えを正確にしたいときに使う。
コード
css
.button {
padding: 24px 56px;
/* 上はキャップハイト、下はベースラインで切り落とす */
text-box: trim-both cap alphabetic;
}text-boxはtext-box-trim（どちら側を削るか）とtext-box-edge（どこで削るか）のショートハンド。
注意点・対応状況
- Chromium 系・Safari は対応済み、Firefox は要確認。未対応でも従来どおり表示されるだけ。
- 日本語フォントでは cap / alphabetic の基準が欧文と異なるため、
exやideographicなど値を変えて確認する。