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

Status: Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 im August 2026).  
Quelle: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://caniuse.com/css-text-box-trim  
Seite: https://designforai.dev/de/css/text-box-trim

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.

## HTML

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

## CSS

```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; }
```

Fallback: Browser ohne Unterstützung behalten die normale Zeilenbox; der Unterschied sind ein paar Pixel zusätzlicher Raum.

## 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.