こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
デザインをしていると、テキストの上下の余白が思ったより大きくなったり、微妙にズレてしまったりすることってありませんか？
フォントによって異なるレディング（テキストの上下の余白）が原因で、要素の高さが揃わず、見た目に違和感が出てしまうことも…。
そんな問題を解決してくれるのが、CSSの新プロパティ「text-box」 です！
このプロパティを使えば、テキストの余白を細かく調整し、デザインの一貫性を保つことが可能になります。
今回は、「text-box」の基本的な使い方や注意点、実装例 を紹介していきます！
text-boxとは？
text-boxは、テキストの上下に発生する余白（レディング）を制御するための新しいCSSプロパティ です。通常、フォントには上下に見えない余白（レディング）が含まれており、デザイン時に意図しないスペースが生じることがあります。
このtext-boxプロパティを使うことで、余白をトリミング（削除）したり、ボックスの高さを調整したり できるようになります。
text-boxの基本的な使い方
構文は以下のようになります。
.element { text-box: '①text-box-trim' '②text-box-edge'; } text-boxには、以下の2つの設定を指定できます。
- none：トリミングしない
- trim-start：上部の余白をトリミング
- trim-end：下部の余白をトリミング
- trim-both：上下両方の余白をトリミング
- content：コンテンツエッジまでトリミング
- padding：パディングエッジまでトリミング
- border：ボーダーエッジまでトリミング
例えば、以下のように記述すると、テキストの上下の余白を削除し、ボックスの高さを最適化 できます。
.element { text-box: trim-both content; } text-boxの実装例
以下の例では、text-boxプロパティを適用して、テキストの上下の余白を削除しています。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
text-boxのメリットとデメリット
メリット
- テキストの余白を適切に調整できる
- ボックスの高さを統一し、デザインの一貫性を保てる
- 余白を削減することで、意図しないレイアウト崩れを防げる
デメリット
- 2025年2月現在、一部のブラウザのみ対応（Chrome・Edgeは対応済み、Firefoxは未対応）
- フォーム要素（`input`や`button`）に適用すると、意図しない挙動になる可能性がある
まとめ
text-boxプロパティを活用することで、テキストの上下の余白をコントロールし、デザインの精度を高める ことができます！
特にボックスの高さを統一したい場面や、意図しない余白を削減したいとき に便利です。
ただし、ブラウザ対応状況や適用する要素に注意しながら使用することが重要です。
今後もWebデザインに役立つ最新のCSS情報を発信していきます！
Web制作のご相談は、satokotadesignまでお気軽にどうぞ！
satokotadesignキャンペーン実施中！
