text-box-trim / text-box-edge (text-box shorthand)

Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 in August 2026).

Chrome 133Edge 133Safari 18.2Firefox 154

Trims the extra space above cap height and below the baseline inside a line box, so text is optically centered in buttons and headings sit flush against the top of their container. Removes the magic-number padding tweaks.

CSS

.fx-035 button {
  font: 600 22px/1 system-ui;
  padding: 12px 18px;
  border: 2px solid #2563eb;
  background: #fff;
  border-radius: 8px;
  margin-right: 8px
}
.fx-035 button:not(.raw) {
  text-box: trim-both cap alphabetic
}
.fx-035 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-035"><button>Trimmed</button><button class="raw">Untrimmed</button></div>

Fallback: Unsupported browsers keep the normal line box; the difference is a few pixels of extra space.

Source: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://caniuse.com/css-text-box-trim

Prompt

Apply `text-box: trim-both cap alphabetic` to buttons, badges and large headings so the glyphs (not the line box) are what gets centered and aligned. Use it instead of hand-tuned asymmetric padding or negative margins; supported in all three engines since Firefox 154.