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

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

Chrome 133Edge 133Safari 18.2Firefox 154

Schneidet den zusätzlichen Raum über der Versalhöhe und unter der Grundlinie in einer Zeilenbox ab, sodass Text in Buttons optisch zentriert ist und Überschriften bündig an der Oberkante ihres Containers sitzen. Entfernt die 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: Browser ohne Unterstützung behalten die normale Zeilenbox; der Unterschied sind ein paar Pixel zusätzlicher Raum.

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

Prompt

Wende `text-box: trim-both cap alphabetic` auf Buttons, Badges und große Überschriften an, damit die Glyphen (nicht die Zeilenbox) zentriert und ausgerichtet werden. Nutze es statt handabgestimmter asymmetrischer Paddings oder negativer Margins; in allen drei Engines unterstützt seit Firefox 154.