Eigenschaft line-height

Die Eigenschaft line-height legt den Abstand zwischen Textzeilen fest (Zeilenabstand).

Die Eigenschaft gibt nicht den Abstand zwischen den Textzeilen an, wie es scheinen mag, sie legt die Zeilenhöhe des Textes fest. Das bedeutet, dass der tatsächliche Abstand zwischen den Zeilen wie folgt berechnet wird: line-height - font-size = Abstand zwischen Textzeilen. Oder umgekehrt line-height = font-size + Abstand zwischen Textzeilen.

Syntax

Selektor {
	line-height: Wert;
}

Werte

Als Wert der Eigenschaft dienen beliebige Einheiten für Größen. Bei der Angabe eines Wertes in % wird der Zeilenabstand in Prozent der Schriftgröße angegeben.

Darüber hinaus kann als Wert jede Zahl größer als Null angegeben werden. In diesem Fall wird sie als Multiplikator der Schriftgröße interpretiert. Zum Beispiel, wenn font-size den Wert 20px hat, und line-height - 1.5, dann ist das gleichbedeutend mit line-height: 30px (20px * 1.5 = 30px).

Standardmäßig hat die Eigenschaft den Wert normal, in diesem Fall wählt der Browser den Zeilenabstand automatisch.

Beispiel

In diesem Beispiel beträgt der Abstand zwischen Textzeilen line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Beispiel

Wir verringern den Abstand auf 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Beispiel

In diesem Beispiel beträgt der Abstand zwischen Textzeilen line-height - font-size = 18px - 18px = 0px - die Zeilen verschmelzen praktisch (die Unterlängen der Buchstaben der oberen Zeile werden die Oberlängen der Buchstaben der unteren Zeile berühren):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Beispiel

In diesem Beispiel ist der Wert line-height ein Multiplikator von 1.5 der Schriftgröße. Folglich entspricht line-height font-size * 1.5 = 18px * 1.5 = 27px. Und der tatsächliche Abstand zwischen den Zeilen beträgt line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Beispiel

Wir erhöhen den Multiplikator:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Beispiel

Wenn line-height kleiner als font-size gemacht wird, dann überlagern sich die Zeilen vollständig:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}