Text im Button optisch zentrieren mit text-box

Weil die Box einer Zeile nicht an der Schrift endet, sondern an den Maßen, die die Schriftdatei vorgibt. Über den Großbuchstaben liegt Raum für Akzente wie bei Ä oder É und für Oberlängen, unter der Grundlinie Raum für die Unterlängen von g, p und y. Dazu kommt der Anteil von line-height, der zu gleichen Teilen oben und unten aufgeschlagen wird. In einem Button mit einem Wort in Großbuchstaben oder mit großem Anfangsbuchstaben ist der obere Raum fast immer leer, der untere auch, aber er ist kleiner.

Das Ergebnis sieht man an jedem Button mit gleichem Padding: Der Abstand von der Oberkante zum Buchstaben ist größer als der von der Grundlinie zur Unterkante. Wie groß der Unterschied ist, hängt allein von der Schrift ab. Deshalb hilft keine feste Regel wie ein Pixel mehr unten, sie stimmt für eine Schrift und für eine Größe und ist beim nächsten Wechsel falsch.

Die üblichen Korrekturen setzen alle an der falschen Stelle an. Ungleiches Padding verschiebt den Text, aber nur für diese Schriftgröße. Ein negativer Rand am Textelement verschiebt die Zeile, aber das Layout drumherum rechnet mit der alten Höhe weiter. Und line-height auf 1 verkleinert die Zeile gleichmäßig nach den Maßen der Schrift, nicht nach dem, was man sieht.

Sie schneidet den Raum zwischen der Kante der Box und der sichtbaren Schrift ab, oben an der ersten Zeile, unten an der letzten oder an beiden. Wo genau geschnitten wird, bestimmt text-box-edge. Mit cap endet die Box oben an der Höhe der Großbuchstaben, mit alphabetic unten an der Grundlinie. Danach ist das Padding der Abstand, den man auch sieht.

Die Kurzschreibweise text-box fasst beides zusammen. text-box: trim-both cap alphabetic schneidet oben an der Großbuchstabenhöhe und unten an der Grundlinie, und weil fehlende Teile ergänzt werden, reicht auch text-box: cap alphabetic. Der Ausgangswert ist normal, also kein Schnitt. Die Eigenschaft wird nicht vererbt und gilt für Blockcontainer und Inline-Boxen.

Safari hat sie in Version 18.2 als erster Browser ausgeliefert, Chrome in Version 133. Firefox unterstützt sie laut caniuse seit Version 154, MDN führt sie seit August 2026 als Baseline. In frühen Entwürfen hieß sie leading-trim, und unter diesem Namen tauchen in älteren Beiträgen noch Beispiele auf, die heute nicht mehr funktionieren.

Für Buttons, Etiketten und Überschriften ist cap alphabetic fast immer die richtige Wahl. Die meisten Beschriftungen beginnen mit einem Großbuchstaben oder bestehen ganz daraus, und das Auge misst den Abstand oben an genau dieser Kante. Unten misst es an der Grundlinie, nicht an den Unterlängen, die bei einem g oder y ins Padding ragen dürfen.

Anders ist es bei Text, der ganz klein geschrieben ist. Dort gibt es oft keine Großbuchstaben, an denen sich das Auge orientiert, und die sichtbare Oberkante liegt auf der Höhe der Kleinbuchstaben. Für diesen Fall gibt es ex als obere Kante. Ein Button mit der Beschriftung weiter oder ein Etikett in Kleinschreibung sitzt damit mittig, wo cap ihn optisch zu tief zeigen würde.

Die dritte Kante, text, entspricht dem Ausgangszustand der Schrift und ist dort nützlich, wo man nur eine Seite schneiden will. Über trim-start oder trim-end lässt sich zum Beispiel nur die Oberkante einer Überschrift abschneiden, damit sie bündig mit einem Bild daneben beginnt, während der Abstand zum folgenden Absatz unverändert bleibt.

Weil die Eigenschaft für Blockcontainer und Inline-Boxen gilt und ein Flex-Container keines von beidem ist. Viele Buttons stehen auf inline-flex, damit Symbol und Text nebeneinander mittig sitzen. Der Text darin landet dann in einem anonymen Flex-Element, und weil text-box nicht vererbt wird, erreicht die Angabe am Button diesen Text nicht.

Die Lösung ist ein eigenes Element um die Beschriftung, meist ein span, und die Angabe gehört auf dieses Element. Eine Inline-Box ist ausdrücklich eingeschlossen, und als Flex-Element wird das span ohnehin zu einem Block. Der Button behält sein inline-flex, das Symbol bleibt mit align-items mittig, und nur der Text verliert den leeren Raum über und unter sich.

Bei einem Button, der als inline-block steht, ist das nicht nötig, denn ein inline-block ist ein Blockcontainer. Am einfachsten prüft man das im Browser: In den Entwicklerwerkzeugen zeigt die Box-Ansicht die Höhe des Textelements, und mit Schnitt muss sie sichtbar kleiner sein als ohne.

Überall dort, wo Text an einer sichtbaren Kante ausgerichtet werden soll. Das häufigste Beispiel ist eine Karte mit Bild und Überschrift nebeneinander: Ohne Schnitt beginnt die Überschrift einige Pixel unter der Oberkante des Bildes, obwohl beide im Raster auf derselben Linie stehen. Mit trim-start cap schließt die Großbuchstabenhöhe bündig mit dem Bild ab.

Das zweite Beispiel sind Abstände zwischen Überschrift und Text. Ein Abstand von 16 Pixeln im Code ist im Bild oft 22 oder 24, weil unter der Überschrift und über dem Absatz jeweils unsichtbarer Raum der Schrift liegt. Wer beide Seiten schneidet, bekommt den Abstand, den das Layout vorgibt, und ein Abstandssystem aus wenigen Werten wird auf der Seite tatsächlich sichtbar.

Das dritte sind kleine Elemente mit Hintergrund: Etiketten, Zähler in einem Kreis, Kennzahlen in einer Kachel. Gerade bei kleinen Schriftgrößen fällt der Versatz auf, weil wenige Pixel einen großen Anteil der Höhe ausmachen. Ein Zähler mit einer Ziffer in einem Kreis sitzt mit cap alphabetic in der Mitte, ohne dass man ihn von Hand verschiebt.

Nichts, was kaputt aussieht. Ein Browser, der text-box nicht kennt, überspringt die Angabe und zeigt die Zeile so, wie sie vorher aussah, mit dem leichten Versatz nach unten. Die Eigenschaft legt also etwas obendrauf, sie ersetzt nichts, und eine Abfrage mit @supports ist für den einfachen Fall nicht nötig.

Eine Abfrage lohnt sich nur, wenn das Padding auf den Schnitt abgestimmt ist und ohne ihn zu groß wäre. Dann schreibt man das Padding für die ungeschnittene Fassung als Standard und setzt das kleinere oder größere Padding zusammen mit text-box in einen Block mit @supports (text-box: cap alphabetic). So bekommt jeder Browser die Höhe, die zu seinem Verhalten passt.

Für die Prüfung reichen zwei Blicke. Im aktuellen Browser muss der Abstand über den Großbuchstaben gleich dem unter der Grundlinie sein, am einfachsten zu sehen bei einem Wort ohne Unterlängen wie START. In einem älteren Browser darf der Button etwas tiefer sitzen, aber nicht so eng, dass die Schrift an den Rand stößt.