Zeilenhöhe - CSS-Tricks | CSS-Almanach 2025

Die line-heightEigenschaft definiert den Speicherplatz über und unter Inline-Elementen. Das heißt, Elemente, die auf display: inlineoder gesetzt sind display: inline-block. Diese Eigenschaft wird am häufigsten verwendet, um den Zeilenabstand für Textzeilen festzulegen.

p ( line-height: 1.5; )

Die line-heightEigenschaft kann die Schlüsselwortwerte normaloder noneeine Zahl, Länge oder einen Prozentsatz akzeptieren .

Gemäß der Spezifikation ist ein Wert von "normal" nicht nur ein einzelner konkreter Wert, der auf alle Elemente angewendet wird, sondern berechnet sich in Abhängigkeit von der für das Element festgelegten (oder geerbten) Schriftgröße zu einem "angemessenen" Wert.

Ein Längenwert kann mit jeder gültigen CSS-Einheit (px, em, rem usw.) definiert werden.

Ein Prozentwert ist die Schriftgröße des Elements multipliziert mit dem Prozentsatz. Zum Beispiel:

Schauen Sie sich diesen Stift an!

In der obigen Demo sind die Zeilenhöhen der drei Absätze auf 150%, 200% bzw. 250% festgelegt. Die Schriftgröße des Body-Elements ist auf 20 Pixel definiert. Dies bedeutet, dass die berechneten Zeilenhöhen für die Absätze 30px, 40px bzw. 50px betragen.

Unitless Line Heights

Die empfohlene Methode zum Definieren der Zeilenhöhe ist die Verwendung eines Zahlenwerts, der als "einheitlose" Zeilenhöhe bezeichnet wird. Ein Zahlenwert kann eine beliebige Zahl sein, einschließlich einer dezimalbasierten Zahl, wie sie im ersten Codebeispiel auf dieser Seite verwendet wird.

Zeilenlose Zeilenhöhen werden empfohlen, da untergeordnete Elemente den Rohzahlwert und nicht den berechneten Wert erben. Auf diese Weise können untergeordnete Elemente ihre Zeilenhöhen basierend auf ihrer berechneten Schriftgröße berechnen, anstatt einen beliebigen Wert von einem übergeordneten Element zu erben, das mit größerer Wahrscheinlichkeit überschrieben werden muss.