← All Tools

CSS text-box-trim Playground

The text-box-trim and text-box-edge properties remove the half-leading and over-shoot that browsers add around the text bounding box — what was always making your tightly-padded buttons feel not quite centered. Toggle the values below and see the difference against an untrimmed control.

Control — no trim
Hxgpy — Ship It block padded as-is, half-leading included Ship It
Trimmed
Hxgpy — Ship It box hugs the chosen edges; padding now visually balances Ship It

Generated CSS

Quick edge reference (over/under)

edge
where the top sits
where the bottom sits
use it for
text
just above the highest ascender, including diacritics
just below the lowest descender
safe default; equivalent to inline-box
cap
top of a flat capital letter (cap height)
—
buttons / pills with all-caps or sentence-case Latin
ex
top of a lowercase x (x-height)
baseline of lowercase x
tight tag chips where you want only the x-height to count
alphabetic
—
the alphabetic baseline (no descenders)
centered labels where j / g / y shouldn't shift the box
ideographic
top of an em-square CJK glyph
bottom of an em-square CJK glyph
vertical writing modes and CJK headings
ideographic-ink
top of the actual ink of a CJK glyph
bottom of the actual ink
tightest possible CJK trim, ignoring the em-square
Why does this matter for buttons?

Every font ships with extra vertical space above the cap line and below the alphabetic baseline — the half-leading. The browser includes that space in the inline box, so when you set padding: 12px 20px on a button, you get a visually uneven top/bottom because the text box was never centered around the glyphs — it was centered around the leading-inflated box.

text-box-trim: trim-both with text-box-edge: cap alphabetic tells the browser to compute the inline box from cap-height down to baseline, so vertical padding sits where you actually expect it. The combined shorthand is text-box: trim-both cap alphabetic.

Browser support & fallback

As of 2025: Safari 18+, Chrome 133+, Edge 133+, Firefox is behind a flag. Wrap in @supports (text-box: trim-both cap alphabetic) to opt in without breaking unsupported browsers. The two long-hand properties unshipped together; older Safari builds support the legacy leading-trim + text-edge draft — the snippet below includes that too.