← Chrome 149 reference
v149 · css · shipped
CSS text-box
Trim the invisible leading space above the cap height and below the alphabetic baseline that line-height adds to every text block. The text-box shorthand (or its longhands text-box-trim / text-box-edge) removes those gaps, making precise text-to-element alignment a pure-CSS problem.
why it exists
Every line of text in CSS inherits half-leading above and below from its computed line-height. That invisible space is great for multi-line prose but a nuisance when you want a heading to sit flush against a coloured box, or an icon to align optically with adjacent text. Before text-box, designers faked the trim with negative margins or magic numbers that broke on font changes. text-box instructs the browser to clip the block-start and/or block-end edge of a text container exactly at the defined text metric.
Source: CSS Inline Layout Level 3 §propdef-text-box-trim.
the properties
text-box (shorthand)
| Property | text-box |
|---|
| Syntax | normal | <text-box-trim> || <text-box-edge> |
|---|
| Applies to | Block containers, multi-column containers, inline boxes |
|---|
| Inherited | No (text-box-edge is separately inherited) |
|---|
| Initial | normal |
|---|
| Notes | When shorthand omits text-box-trim, it defaults to trim-both. normal resets both longhands. |
|---|
text-box-trim
| Value | Effect |
|---|
none | No trimming. Default; existing behaviour. |
trim-start | Trim the block-start side of the first line (removes leading above). |
trim-end | Trim the block-end side of the last line (removes leading below). |
trim-both | Both trim-start and trim-end. |
text-box-edge
| Value | Effect |
|---|
auto | Uses the line-fit-edge value; "leading" is treated as "text". |
text | Trim to the text-over/text-under baselines. |
cap | Trim block-start to the cap-height baseline (top of uppercase letters). |
ex | Trim block-start to the x-height baseline. |
alphabetic | Trim block-end to the alphabetic baseline (bottom of most lowercase letters). |
ideographic | Trim to ideographic-over/under baselines (for CJK). |
ideographic-ink | Trim to ideographic-ink-over/under baselines. |
The most common pair is cap alphabetic: trim above to cap height, below to the alphabetic baseline. This is the "tight Latin text" preset.
Source: CSS Inline Layout Level 3 §propdef-text-box-edge.
example: heading flush inside a coloured box
h1 {
/* Without text-box, the padding visually looks uneven because
of half-leading above and below the text. */
padding: 1rem;
background: oklch(90% 0.15 260);
/* With text-box: leading is removed; padding is optically even. */
text-box: trim-both cap alphabetic;
}
example: icon + text optical alignment
.label {
display: flex;
align-items: center;
gap: 0.5rem;
}
.label span {
font-size: 1rem;
line-height: 1.5;
/* Remove the invisible leading so the text baseline aligns
with the icon's visual centre, not the line box centre. */
text-box: trim-both cap alphabetic;
}