So beseitigen Sie zusätzlichen Leerraum über und unter Text in CSS

Der zusätzliche Leerraum über und unter Text hat zwei Ursachen: die eingebauten vertikalen Metriken der Schrift und das Half-Leading (der halbe Durchschuss), das line-height auf jeder Seite der Zeile hinzufügt (oder abzieht). Die native CSS-Lösung lautet text-box: trim-both cap alphabetic.

Sie haben line-height: 1.1 gesetzt und sämtliche Margins entfernt, und trotzdem sitzt die Überschrift in einer Box, die höher ist als ihre Buchstaben. Also haben Sie eine negative Margin ergänzt, sie so lange angepasst, bis es passte, und sich anderen Aufgaben gewidmet. Dann wurde die Hausschrift geändert.

Dieser Artikel erklärt, woher dieser Leerraum stammt, warum negative Margins ihn nicht zuverlässig entfernen können und wie text-box-trim, text-box-edge und die Kurzschreibweise text-box ihn bei Überschriften und Buttons wegschneiden. Abschließend zeigen wir einen Fallback für ältere Browser.

Das Symptom: eine Lücke, die sich nicht durch Padding erklären lässt

Eine Überschrift ohne Padding, ohne Margin und mit knapper line-height zeigt trotzdem Leerraum über ihren Großbuchstaben und unter ihrer Grundlinie. Die DevTools zeigen, dass die Content-Box höher ist als die sichtbaren Buchstaben, und nichts in Ihrem Stylesheet erklärt den Unterschied.

Der übliche Workaround ist eine negative Margin, die per Trial-and-Error ermittelt wird:

h1 {
  line-height: 1.1;
  /* Tuned by eye for one font; wrong for any other */
  margin-block: -0.2em -0.15em;
}

Diese Werte sind lediglich Platzhalter zur Veranschaulichung. Sie leiten sich aus nichts ab – und genau darin liegt das Problem.

Warum gibt es zusätzlichen Leerraum über und unter Text?

Der zusätzliche Leerraum über und unter Text hat zwei Ursachen – Schriftmetriken und Half-Leading –, und beide gehören zum Text, nicht zum Box-Modell.

Erstens reserviert eine Schrift vertikalen Platz für all ihre Glyphen, von hohen Versalien bis zu den Unterlängen von Buchstaben wie g und y. Wie viel Platz reserviert wird, unterscheidet sich von Schriftart zu Schriftart, wie die MDN-Referenz zu text-box-trim anmerkt. Dieselbe font-size ergibt daher je nach Schrift eine höhere oder niedrigere Zeilenbox.

Zweitens fügt line-height Durchschuss (Leading) hinzu. Die CSS-2.1-Spezifikation zu Leading und Half-Leading definiert Leading als Differenz zwischen der line-height und der Summe aus Ascent und Descent der Schrift. Die eine Hälfte davon wird über den Glyphen platziert, die andere darunter. Bei vielen Schriften ist die Summe aus Ascent und Descent größer als 1.1em, sodass das Half-Leading bei line-height: 1.1 oft gering oder sogar negativ ausfällt. So oder so bleibt der Leerraum, den die Metriken der Schrift selbst über den Versalien und unter der Grundlinie lassen, bestehen.

Jede Schriftart reserviert unterschiedlich viel vertikalen Platz. Eine negative Margin, die für eine Schrift optimiert wurde, ist daher für jede andere falsch. Das gilt auch für die Fallback-Schrift, die angezeigt wird, bevor ein Webfont geladen ist – ein Problem, das auch schriftbedingte Layout-Verschiebungen verursacht. Wenn Sie eine Session wiedergeben, in der der Webfont verspätet eintrifft, sehen Sie genau den Frame, in dem die Schrift wechselt und eine Überschrift mit „magischer“ Margin springt.

Wie beheben Sie die Lücke mit text-box-trim?

text-box-trim legt fest, welche Kanten eines Textblocks beschnitten werden, und text-box-edge bestimmt, auf welche Linie jede Kante beschnitten wird. text-box-trim akzeptiert vier Schlüsselwörter:

• none: der Initialwert. Es wird nichts beschnitten.
• trim-start: beschneidet die obere Kante (Over-Edge).
• trim-end: beschneidet die untere Kante (Under-Edge).
• trim-both: beschneidet beide Kanten.

Hier dieselbe Überschrift, bei der der Margin-Hack ersetzt wurde:

h1 {
  line-height: 1.1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

Mit text-box-trim liegt die Oberkante der Box nun an der Oberkante der Versalien und die Unterkante auf der Grundlinie. Der zusätzliche Leerraum verschwindet bei jeder Schrift, weil der Browser die Positionen aus der Schrift selbst ausliest statt aus Ihrer Schätzung.

Die Kurzschreibweise text-box fasst beide Eigenschaften in einer Deklaration zusammen. Diese beiden Regeln sind gleichwertig:

h1 {
  text-box: trim-both cap alphabetic;
}

/* Same result: an omitted trim keyword means trim-both */
h1 {
  text-box: cap alphabetic;
}

Welche text-box-edge-Werte sind relevant?

Bei horizontalem Text decken zwei Kantenpaare nahezu alle Fälle ab: cap alphabetic und ex alphabetic. text-box-edge nimmt zwei Schlüsselwörter entgegen: Das erste legt die obere Kante fest, das zweite die untere.

cap alphabetic entspricht der Art, wie Designer den Abstand um eine Überschrift oder ein Label üblicherweise messen: von der Versalhöhe bis zur Grundlinie. Verwenden Sie ex alphabetic, wenn der Text überwiegend aus Kleinbuchstaben besteht und die x-Höhe die optische Oberkante bildet:

.lowercase-label {
  text-box: trim-both ex alphabetic;
}

Drei Regeln sind typische Stolperfallen:

• text-box-edge hat allein keine Wirkung. Es wird nichts beschnitten, solange text-box-trim nicht auf einen anderen Wert als none gesetzt ist.
• Wird in der Kurzschreibweise text-box das Trim-Schlüsselwort weggelassen, bedeutet das trim-both; wird die Kante weggelassen, bedeutet das auto. Das Schlüsselwort normal entspricht none auto.
• Weder text-box-trim noch text-box-edge werden vererbt. Wenn Sie die Eigenschaften auf body setzen, werden die darin enthaltenen Überschriften oder Buttons nicht beschnitten. Deklarieren Sie sie auf jedem einzelnen Element oder in den Basis-Styles jeder Komponente.

Ein Button-Label mit text-box zentrieren

Bei einem Button mit gleichem Padding oben und unten wirkt das Label oft nicht mittig. Das Padding ist zwar gleich, der interne Leerraum der Schrift über den Versalien und unter der Grundlinie jedoch nicht – und diesen Unterschied nehmen Sie als zusätzliches Padding auf einer Seite wahr.

.button {
  padding: 0.75rem 1.25rem;
}

Wird die Label-Box auf Versalhöhe und Grundlinie beschnitten, ist das Padding der einzige Abstand zwischen Text und Button-Rand:

.button--trimmed {
  padding: 0.75rem 1.25rem;
  text-box: trim-both cap alphabetic;
}

Bei einem Label wie „Submit“ wirkt der Abstand über den Versalien nun genauso groß wie der Abstand unter der Grundlinie. Die CSS-Inline-Layout-Spezifikation erlaubt die Anwendung von text-box-trim auf Block-Container, mehrspaltige Container und Inline-Boxen, doch die Browser verhalten sich unterschiedlich. Laut Mozillas Intent to Ship beschneiden Firefox und Safari Inline-Boxen, Chromium hingegen nicht. Zudem hat das Beschneiden keine Wirkung auf Flex- oder Grid-Container. Geben Sie dem Button daher display: inline-block oder setzen Sie das Trimming auf ein Label-Element innerhalb des Buttons. Da die Unterkante auf die Grundlinie beschnitten wird, ragen die Unterlängen von Buchstaben wie g, p und y in das Padding hinein. Das ist das typografisch erwartete Ergebnis und kein Fehler.

Browser-Support und Fallback

MDN kennzeichnet text-box als Baseline 2026, neu verfügbar seit August 2026, und weist darauf hin, dass die Eigenschaft auf älteren Geräten oder in älteren Browsern möglicherweise nicht funktioniert. Browser ohne Unterstützung ignorieren die Deklaration und rendern Text mit den normalen Schriftabständen. Der Fallback ist also das unbeschnittene Layout: nicht kaputt, nur weniger präzise. Wenn ein Design auf die alten Ausgleichs-Margins angewiesen ist, behalten Sie diese mithilfe einer @supports-Feature-Query ausschließlich für diese Browser bei:

h1 {
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  h1 {
    /* Old per-font patch, kept only where text-box is unsupported */
    margin-block: -0.2em -0.15em;
  }
}

Fazit

Die Lücke um Text setzt sich aus Schriftmetriken und Half-Leading zusammen. Eine negative Margin kaschiert sie nur – und das auch nur für eine einzige Schriftart. Ersetzen Sie diese Margins bei jeder Überschriften- und Label-Komponente durch text-box: trim-both cap alphabetic, verschieben Sie verbliebene Legacy-Margins hinter @supports not und prüfen Sie das Ergebnis sowohl mit Ihrer Fallback-Schrift als auch mit Ihrem Webfont.

FAQs

Verändert text-box-trim den Zeilenabstand in einem mehrzeiligen Absatz?

Nein. Bei einem Block-Container wirkt sich text-box-trim nur auf die Oberkante der ersten Zeile und die Unterkante der letzten Zeile aus. Das Half-Leading zwischen umbrochenen Zeilen bleibt unverändert, sodass line-height weiterhin den Abstand innerhalb des Absatzes steuert. Nur die äußeren Kanten des Blocks rücken auf die Versalhöhe und die Grundlinie ein.

Warum setzt man nicht einfach line-height: 1, um den zusätzlichen Leerraum zu entfernen?

line-height: 1 verändert nur den Durchschuss. Der von der Schrift selbst reservierte Platz über den Versalien und unter der Grundlinie bleibt bestehen, sodass die Box-Kanten weiterhin nicht mit der Versalhöhe oder der Grundlinie übereinstimmen. Außerdem verringert sich dadurch der Abstand zwischen umbrochenen Zeilen. text-box-trim beschneidet nur die äußeren Kanten auf die Schriftmetriken und lässt line-height frei, um die Lesbarkeit zu steuern.

Wirkt sich das Beschneiden mit text-box auf das Layout umgebender Elemente aus?

Ja. text-box-trim verschiebt die Inhaltskanten des Elements auf die gewählten Metriken, sodass das Element weniger Platz in Blockrichtung einnimmt. Margins, Flex- und Grid-Gaps sowie benachbarte Elemente werden dann von der beschnittenen Kante aus gemessen und nicht vom reservierten Platz der Schrift. Deshalb werden Spacing-Tokens nach dem Beschneiden optisch exakt, und deshalb ist es wichtig, alte negative Margins zu entfernen.

Wie erkenne ich die Unterstützung von text-box in JavaScript?

Rufen Sie CSS.supports('text-box', 'trim-both cap alphabetic') auf. Die Methode gibt in Browsern, die diese Deklaration akzeptieren, true zurück, andernfalls false. Sie führt denselben Test aus wie die @supports-Regel in CSS. So können Sie zur Laufzeit entscheiden, ob Ausgleichs-Margins angewendet werden sollen, oder protokollieren, welchen Rendering-Pfad ein Nutzer erhält.