段落・折り返し
text-box-trim
text-box-trim は、ブロックの最初の行の上と最後の行の下にある、文字の外側の余白を削ります。padding を上下同じにしても文字が下に寄って見える、といったずれを直せます。
構文
none | trim-start | trim-end | trim-bothプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
text-box-edge: cap alphabetic;
text-box-trim: trim-both;
}コントロール
text-box-trimtrim-both
解説
値の書き方
none：削りません。初期値です。trim-start：最初の行の上を削ります。trim-end：最後の行の下を削ります。trim-both：最初の行の上と、最後の行の下の両方を削ります。
どこまで削るか
削る位置は text-box-edge で決めます。初期値の auto では、フォントの上端・下端（アセント・ディセント）の外側、つまり line-height で足された余白（ハーフレディング）だけを削ります。text-box-edge: cap alphabetic にすると大文字の上端からベースラインまでに合わせられるので、padding がそのまま文字の上下の余白に見えます。このページのプレビューは、補助の宣言で cap alphabetic にしています。
削るのは箱の中身の端で、padding や border はそのまま残ります。間の行の間隔も line-height のままです。ベースラインで削ると、p や g のようにベースラインより下に伸びる部分は中身の外にはみ出すので、overflow: hidden の箱では下に padding を残しておきます。
効く条件
display: blockなどのブロックの箱と、段組みの箱に効きます。段組みでは、段ごとに最初と最後の行を削ります。- フレックスボックスやグリッドの箱に書いても、中の項目には届きません。項目のほうに書きます。
- 最初の行（最後の行）との間に、子の要素の padding や border があると削りません。
- インライン要素にも書けて、そのときは要素の背景などが占める高さを削ります。ただし、対応しているのは今のところ Firefox だけです（Safari は一部だけ）。
ブラウザの対応
Chrome・Edge（133 以降）、Safari（18.2 以降）、Firefox（154 以降）が対応しています。text-box-trim と text-box-edge は、ショートハンドの text-box でまとめて書けます（text-box: trim-both cap alphabetic）。text-box で text-box-trim の値を省くと、初期値の none ではなく trim-both になります。