Stil mit {stil}

Nov 07

CSS line-height • Zeilenhöhe der Schrift

Die Zeilenhöhe eines Textes hängt per Vorgabe von der Schriftgröße ab und kann unabhängig von der Schriftgröße durch die CSS-Eigenschaft line-height verändert werden.

.p2 { line-height: 150%; background: lavender; }

Die vorgegebene Zeilenhöhe (Abstand von Grundlinie zu Grundlinie) wurde aus dem Printbereich entlehnt und ist für die Darstellung auf dem Monitor fast immer zu gering, so dass Webdesigner die Zeilenhöhe gern vergrößern – meist werden Zeilenhöhen zwischen 130 bis 150 % empfohlen. Eine Daumenregel besagt, dass für die bessere Lesbarkeit eines Textes die Zeilenhöhe um so größer sein soll, je länger die Textzeilen laufen.

Der Durchschuss – der Abstand von der Unterlänge der oberen Zeile bis zur Oberlänge der folgenden Zeile – wird durch margin festgelegt.

• height width
• [ line-height ]
• min-height max-height
• min-width max-width
• vertical-align

line-height

IE4+ M1 N4+ O5+ CSS1 Erblich: Ja

line-height

beschreibt den Abstand zwischen aufeinander folgenden Zeilen. Der Abstand hängt von der Schriftgröße ab.

Werte

normal | <number> | <length> | <percentage> | inherit

normal

ist die Voreinstellung. Die Deklaration von normal stellt sicher, dass vorangegangene Deklarationen die Zeilenhöhe nicht beeinflussen.

<number>

ist ein Faktor, mit dem die Schriftgröße multipliziert wird, um die Zeilenhöhe zu berechnen.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage> (Prozentsatz)

basiert auf der normalen Zeilenhöhe, die als 100% angesetzt wird. Ein Prozentwert, der kleiner ist als 100%, verringert die Zeilenhöhe. Die Angabe von 100% bewirkt keine Änderung. Ein Wert, der größer als 100% ist, erhöht die Zeilenhöhe.

Beispiel

p { line-height: normal; }
br { line-height: 1.5in; }
blockquote { line-height: 85%; }

oder

<p style="line-height: 40px;">Hier ist <br /> richtig viel Platz!</p>

Darstellung

Hier ist zwischen den Zeilen
richtig viel Platz!

zurück zum Seitenanfang