Limited support 注意して使用。Firefox が未対応で、Chrome / Safari でも新しい実装。実験的に使用し、フォールバックを用意すること。
タイポグラフィ Limited support

text-box (trim/edge)

text-box-trim と text-box-edge（ショートハンド: text-box）は、テキスト上下のフォントメトリクスに基づく余白を除去する。これにより、パディングやマージンだけでは制御しきれなかったテキスト周りの余白を精密に揃えられる。ボタン内のテキストセンタリングやアイコンとの垂直揃えが格段に楽になる。

タイポグラフィ精密

概要

text-box-trim と text-box-edge（ショートハンド: text-box）は、テキスト上下のフォントメトリクスに基づく余白を除去する。これにより、パディングやマージンだけでは制御しきれなかったテキスト周りの余白を精密に揃えられる。ボタン内のテキストセンタリングやアイコンとの垂直揃えが格段に楽になる。

対応ブラウザ

デスクトップ

Chrome 133+
Edge 133+
Safari 18.2+
Firefox 未対応

モバイル

Chrome Android 133+
Safari iOS 18.2+
Firefox Android 未対応

基本構文

CSS 
/* ショートハンド */
.precise {
  text-box: trim-both cap alphabetic;
}

/* 個別指定 */
.button-text {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* 上部のみトリミング */
.heading {
  text-box: trim-start cap alphabetic;
}

実務での使いどころ

  • ボタン内テキストの精密な中央揃え

    フォント固有の上下余白を除去し、ボタン内のテキストを視覚的に正確に中央に配置する。

  • テキストとアイコンの揃え

    テキストの余白をトリミングして、隣接するアイコンとの垂直位置を正確に揃える。

注意点

  • Firefox（2026年3月時点）では未対応。フォールバックが必須。
  • フォントごとにメトリクスが異なるため、トリミング結果はフォントに依存する。

フォールバック戦略

CSS 
/* フォールバック：従来の調整 */
@supports not (text-box-trim: trim-both) {
  .button-text {
    line-height: 1;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
  }
}

アクセシビリティ

  • 視覚的な余白の調整のみであり、テキストの意味やスクリーンリーダーの読み上げには影響しない。

参考リンク