CSSでテキストの上下の余白を削除できるtext-boxの使い方と注意点

text-boxとは

text-boxはCSSでテキストボックスの余白を削除できるプロパティです。

テキストのベースライン周りの余白を調整し、ボックスの高さを最適化できます。

例えば、以下のようなテキストボックスがあったとします。

Hello world ハローワールド

HTML

<p><span class="foo">Hello world ハローワールド</span></p>

CSS

.foo {
  display: inline-block;
  border: 1px solid red;
  font-size: 2rem;
}

テキストボックスの上下に余白がありますね。

次にtext-boxを追加します。

ご覧の通り、テキストボックスの上下の余白が削除されました。

Hello world ハローワールド

HTML

<p><span class="foo text-trim">Hello world ハローワールド</span></p>

CSS

.foo {
  display: inline-block;
  border: 1px solid red;
  font-size: 2rem;
}

.text-trim {
  text-box: trim-both cap alphabetic;
}

この状態のテキストボックスなら上下中央揃えした際に位置がズレることなく配置されます。

2025年2月5日現在、EdgeとFirefoxでは使用不可です。

テキストボックスの上下の余白を削除するとレイアウトの見た目が大きく変わるので、EdgeとFirefoxの対象のWebサイトなどでは、まだ使用しないほうが良いでしょう。

text-boxはインライン要素には使用不可です。

試しに以下のようにインライン要素にtext-boxプロパティを適用してみてください。

インライン要素では、テキストボックスの上下の余白が削除されていないことが確認できます。

Hello world ハローワールド

HTML

<p><span class="bar">Hello world ハローワールド</span></p>

CSS

.bar {
  border: 1px solid red;
  font-size: 2rem;
  text-box: trim-both cap alphabetic;
}