CSS line-height - Zeilenhöhe für die Elemente festlegen

Auf Websites werden Inhalte im Textfluss nebeneinander angeordnet und am Ende des umschließenden Bereichs erfolgt an den Leer- oder Trennstellen automatisch ein Zeilenumbruch. Die Zeilenhöhe der Texte, die auch line-height genannt wird, ist standardmäßig identisch wie die Schriftgröße und hängt außerdem von der verwendeten Schriftart ab. Über die Eigenschaft line-height kann die Zeilenhöhe in CSS vorgegeben werden, sodass der Abstand zwischen den Zeilen erhöht wird.

Ist der Wert für line-height kleiner als die Schriftgröße, werden die Texte zusammengerückt. Ein negativer Wert ist jedoch nicht möglich. Die Eigenschaft kann allen Elementen zugewiesen werden. Bei einigen Inline-Elementen die replaced sind kann es jedoch passieren, dass die Eigenschaft keinen Effekt zeigt. Weist man die Eigenschaft line-height Block-Elementen zu, definiert man damit die Mindesthöhe der enthaltenen Boxen, die durch die Inhalte generiert werden. Diese können somit auch größer sein, als im Elternelement angegeben. Weist man line-height den Inline-Elementen zu, definiert man damit die Höhe der Elementboxen an sich. Die Syntax ist anhand eines Beispiels nachfolgend abgebildet.

Angabe des Werts für line-height

Bei der Angabe des Werts für line-height hat man verschiedene Möglichkeiten. Neben einer numerischen Angabe mit und ohne Einheit kann man auch Keyword-Werte angeben.

Numerische Angabe ohne Einheit

<Zahl> (Mit Punkt als Komma, z.B. 1.2)

Das ist die bevorzugte Variante, damit Vererbungsprobleme vermieden werden. Die Angabe bezieht sich auf die Schriftgröße. Mit beispielsweise 1.2 gibt man an, dass die Zeilenhöhe 120% der Schriftgröße betragen soll.

Numerische Werte mit Einheit

<Zahl>px (Pixel)
<Zahl>% (Prozentuale Angabe, bezieht sich auf die Schriftgröße)
<Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
<Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
<Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
<Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
<Zahl>vw (1vw entspricht 1% der Anzeigebreite)
<Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
<Zahl>vmin (der kleinere Wert von vw oder vh)
<Zahl>vmax (der größere Wert von vw oder vh)
<Zahl>pt (Punkt)
<Zahl>pc (Pica)
<Zahl>in (Inch)
<Zahl>mm (Millimeter)
<Zahl>cm (Zentimeter)

Keyword-Werte

normal (Standardwert, normale Zeilenhöhe, abhängig vom Browser)
inherit (Vererbt vom Elternelement)
initial (Setzt auf den Standardwert)
unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Schriftgröße und Zeilenhöhe

Texte werden auf der Grundlinie aufgesetzt. Das ist eine imaginäre Linie, die etwas unterhalb der vertikalen Mitte positioniert ist. Die Unterkante der Schrift wird p-Linie genannt. Die Oberkante der Kleinbuchstaben nennt man x-Linie. Die Oberkante der Großbuchstaben nennt man h-Linie und die Oberkante der Schrift wird k-Linie genannt.

Die Schriftgröße besteht aus dem Abstand zwischen der k-Linie und der p-Linie und wird in Oberlänge, Unterlänge und x-Länge aufgeteilt. Die x-Länge ist die Höhe der Kleinbuchstaben. Die Oberlänge ist der Abstand zwischen der k-Linie und der x-Linie. Die Unterlänge ist der Abstand zwischen der p-Linie und der x-Linie.

Die Höhe eines Großbuchstabens wird Versalhöhe genannt. Bei einer Zeilenhöhe, die größer als die Schriftgröße ist, wird der überschüssige Abstand durch 2 geteilt und oberhalb und unterhalb des Textes hinzugefügt, weshalb sie half-leading genannt werden (halber Durchschuss). Man kann die Höhe von half-leading anhand der Formal (Zeilenhöhe - Schriftgröße) / 2 berechnen.

Abstand zwischen den Zeilen - leading (Durschuss)

Da half-leading sowohl unterhalb, als auch oberhalb der Texte platziert wird, ist der Abstand zwischen den Zeilen die doppelte Höhe von half-leading und wird leading (Durchschuss) genannt. Somit kann leading entweder anhand der Formel Zeilenhöhe - Schriftgröße oder 2 x half-leading berechnet werden.

Bilder mit Hilfe der Zeilenhöhe vertikal positionieren

Eine direkte Zuweisung der Zeilenhöhe auf Bilder hat zwar keinen Effekt, jedoch kann man dem umschließenden Element eine Zeilenhöhe zuweisen und dadurch die vertikale Position der enthaltenen Bilder beeinflussen. Ein Beispielcode in CSS und HTML.

.klasse {
line-height: 350px;
}

<!-- Beispiel 1 -->
<div class="klasse">
  <img src="bild.png">
</div>
  
<!-- Beispiel 2 -->
<div>
  <span class="klasse">
    <img src="bild.png">
  </span>
</div>

Grundlinie zur Mittellinie verschieben

Den Elementen wird häufig eine Zeilenhöhe zugewiesen, um die darin enthaltenen Bilder vertikal mittig zu positionieren, da diese wie die Texte auf der Grundlinie aufgesetzt werden. Genau genommen ist die Grundlinie jedoch nicht die Mittellinie, sondern etwas unterhalb. Das ist bedingt durch die Schriftgröße, die auf die Elemente vererbt werden und falls nicht, wird die Standard-Schriftgröße des Browsers herangezogen. So passiert es, dass die Bilder etwas unterhalb der Mittellinie positioniert werden. Wenn das Bild genau auf der Mittellinie aufsetzen soll, kann man die Schriftgröße für das umschließende Element auf 0 setzen.

Die Schriftgröße 0 sorgt natürlich dafür, dass die beiden Bereiche von half-leading vergrößert und etwaige Texte nicht angezeigt werden. Daher sollte man diese außerhalb des Elements platzieren.

Bild mit der Eigenschaft vertical-align positionieren

Bei der vertikalen Ausrichtung ist man bei Bildern (oder anderen Inline-Elementen) nicht nur darauf beschränkt, diese auf der Grundlinie zu positionieren. Mit der Eigenschaft vertical-align kann man für sie verschiedene Positionen für die vertikale Ausrichtung innerhalb der line-box auf angeben.

Die line-box ist nicht zu verwechseln mit der line-height, auch wenn sie oft identisch sind. Mit line-box wird die Zeile in der Gesamtheit betrachtet. Beispielsweise können in einer Zeile mehrere Inline-Elemente mit unterschiedlichen Schriftarten, Schriftgrößen oder Zeilenhöhen vorhanden sein, die dazu über vertical-align positioniert werden können. Die gesamte Höhe der line-box erstreckt sich in dem Fall von der obersten Kante, die am höchsten liegt, bis zur untersten Kante, die am tiefsten liegt. Ob weitere Elemente mit einer geringeren Höhe vorhanden sind, spielt für die Höhe der line-box keine Rolle. Man muss also zwischen der Höhe von line-box (gesamte Zeile) und line-height (einzelne Inline-Elemente, z.B. SPAN, EM, etc.) unterscheiden.