Back to notes

CSS text-box: text finally centered in its box

14 November 2026·
csstypographyuibaseline
Live demoOpen full screen

You give a button padding: 12px and the label still looks a little off: more air above the letters than below, or the other way round. It isn't you. It's the font. And there's now a one-line fix that works in Chrome, Safari and Firefox: text-box.

Flip the switch in the demo above and watch the dashed box around "Hxg" collapse onto the cap line and the baseline. The button, the pill and the number below use the same padding top and bottom in both states. Only the trimmed version actually looks centered.

Why text is never centered on its own

Every font carries some vertical space beyond the letters themselves: room for accents above the capitals and for descenders like the tail of the "g". On top of that, line-height adds leading, and CSS splits that extra space in two, half above and half below the text. That's what the Chrome team calls half-leading.

All of that space counts toward the element's height. So when you put padding: 12px on a button, the real distance from the top edge to the top of the capitals is 12px plus whatever the font and the line height add. The usual workaround was to hand-tune padding-block until it looked right, and the Chrome article points out the problem with that: it might look right on one screen or OS and wrong on another, because each font brings a different amount of space.

How it works

text-box is a shorthand for two properties:

  • text-box-trim says which edges to trim: none (the default), trim-start, trim-end or trim-both.
  • text-box-edge says where to trim to. The first value is the over edge (text, cap or ex), the second is the under edge (text or alphabetic). Its initial value is auto, which is the same as text.

The combination you'll use most is trimming to the top of the capitals and to the baseline:

.btn {
  padding: 12px 18px;
  text-box: trim-both cap alphabetic;
}

That's exactly what the demo's button does. I measured it in Chromium and WebKit with a 17px bold system font and line-height: 1.4: the button goes from 52px tall to 40px, and the 12px of padding is now the real gap between the edge and the letters.

The longhand version is equivalent:

.pill {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

One thing I checked because it's easy to get wrong: text-box-edge on its own does nothing. MDN says it has no effect if text-box-trim isn't set or is none, and in my test a button with only text-box-edge: cap alphabetic stayed at 52px.

The ex value trims to the x-height instead of the capitals. Try it in the demo: the box shrinks to the height of the "x", which is handy for lowercase-only labels or for aligning text with a small icon.

Support and gotchas

  • Support: Chrome and Edge 133, Safari 18.2 and Firefox 154, released on August 18, 2026. MDN marks it as Baseline 2026, newly available.
  • Older browsers just ignore it. Nothing breaks; you get today's spacing. Detect it with CSS.supports('text-box', 'trim-both cap alphabetic') or @supports. The Firefox build I used for testing predates 154, so the demo showed its warning there and faked the trim with negative margins computed from canvas text metrics. That's fine for a demo, not something I'd ship.
  • It depends on the font. The same values trim different amounts with different fonts. Switch between sans, serif and mono in the demo and watch the box height change.
  • Descenders stick out. With alphabetic the box ends at the baseline, so the tail of the "g" overflows below it. That's intentional, but it means anything painted only inside the box, like a background clipped to the text, gets cut off. It happened to me in the first version of the demo with a gradient set via background-clip: text.
  • Multi-line text is trimmed above the first line and below the last one, not between lines.
  • Where it applies: block containers and inline boxes. It isn't inherited, so set it on the element whose box you want to tighten.
  • It used to be called leading-trim, in case you find old articles.

What to keep an eye on

  • The extra edge values. The grammar also includes ideographic and ideographic-ink. MDN doesn't describe them yet, so check support before relying on them.
  • Your own components. It's worth reviewing buttons, badges and tags where block padding was hand-tuned to compensate for the font: some of those magic numbers can now go.
  • The real-world baseline. Firefox 154 is recent. Until older versions fade out, think of it as progressive enhancement.

Sources