text-box
text-box は、行の上下の余白をどちら側で削るか（text-box-trim）と、どこまで削るか（text-box-edge）をまとめて指定するショートハンドです。text-box: cap alphabetic と書くだけで、最初の行の上を大文字の上端まで、最後の行の下をベースラインまで削れます。
構文
normal | <'text-box-trim'> || <'text-box-edge'>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
text-boxtrim-bothtext-box-trim
cap alphabetictext-box-edge
コード
.box {
text-box: cap alphabetic;
}コントロール
text-boxcap alphabetic
text-box-trimtrim-both
text-box-edgecap alphabetic
auto（ふつうは text と同じ）
上の端（over）
下の端（under）
解説
値の書き方
normal：削りません。初期値で、text-box-trim はnone、text-box-edge はautoになります。trim-start・trim-end・trim-both・none：text-box-trim（どちら側を削るか）になります。cap alphabeticのような 1 つか 2 つのキーワード、またはauto：text-box-edge（どこまで削るか）になります。
text-box-trim は text-box-edge の前にも後ろにも書けます。このページのコントロールは trim・edge の順で書き出します。
省いたときの値
text-box-edge を省くと初期値の auto になります。一方、text-box-trim を省くと、初期値の none ではなく trim-both になります。そのため text-box: cap alphabetic は text-box: trim-both cap alphabetic と同じで、上下の両方を削ります。このページのショートハンドの内訳でも、trim を省いたときは trim-both と出します。
何が変わるか
このページのプレビューは、大きな文字の Hxpあ を 1 行だけ入れたブロックの箱です。上下の padding は同じ 16px なので、削ると箱の高さが縮み、文字の上下の空きが padding と揃って見えます。text-box-edge の auto は、line-height で足された余白（ハーフレディング）だけを削ります。
気をつけること
- Chrome・Edge（133 以降）、Safari（18.2 以降）、Firefox（154 以降）が対応しています。text-box-edge の
ideographicとideographic-inkは、今のところ Firefox だけです。 - フレックスボックスやグリッドの箱に書いても、中の項目には届きません。削りたい文章の入ったブロックの箱に書きます。