CSS 2.1: `line-height`

Erläuterungen

Die Eigenschaft line-height modifiziert den Zeilenabstand von Textzeilen. Zusammen mit dem Wert für font-size lässt sich daraus die Höhe des Raumes zwischen den Zeilen ableiten. In der Regel wird der Zeilenabstand bei der Deklaration von font-size, abhängig von Browser und Schriftfamilie, als etwa das 1,2-fache der Schrifthöhe gesetzt.

Line-height kann aber auch als Teil der Kurzschrift- Eigenschaft font angewandt werden. In dem Fall muß ihr Wert immer direkt auf den Wert von font-size folgen und von diesem durch einen Schrägstrich abgetrennt sein.

Wird line-height für ein Block- Level- Element deklariert, dessen Inhalt aus Elementen im Inline-Level besteht, dann steht dieser Wert für die Mindesthöhe einer Zeilenbox innerhalb des Elementes, d. h. innerhalb von Absätzen mit Fließtext gibt line-height die kleinste Zeilenhöhe an. Dieser Wert überschreibt die durch font-size implizierte Zeilenhöhe auch dann, wenn daraus eine kleinere Zeilenhöhe resultiert.

Die Zeilenhöhe kann auch kleiner als die Schrifthöhe sein. In dem Fall sind die Browser gehalten, den Text nicht an der Ober- oder Unterkante abzuschneiden, sondern die Zeilen entsprechend zusammen zu rücken.

Angewandt auf Inline- Level- Elemente, wie strong oder span, spezifiziert diese Eigenschaft die Höhe, die zur Berechnung der Zeilenhöhe herangezogen wird. Ausnahmen bilden hier die replazierten Inline- Level- Elemente, deren Höhe durch die Eigenschaft height gegeben ist. Mehr zur Zeilenhöhe ist auf der Seite über die Inline- Formatierung nachzulesen.

Tipp:

Definiert man die Zeilenhöhe mit einem einfachen Zahlenwert, ist sie immer von der Schriftgröße des aktuellen Elements abhängig. Wenn ein Absatz z. B. ein Element span enthält, für das eine größere font-size definiert ist, dann passt sich die Zeilenhöhe innerhalb des span automatisch an. Ist die für den Absatz gegebene Zeilenhöhe dagegen in 'em' oder in '%' definiert, wird daraus erst der Verwendete Wert für den Absatz errechnet und dieser absolute Wert dann weitervererbt.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'line-height' normal | <number> | <length> | <percentage> | inherit

normal (Ausgangswert): Das Anwenderprogramm ist frei in der Wahl der dargestellten Zeilenhöhe. Vom W3C wird das 1.0- bis 1.2-fache der Schriftgröße empfohlen, die meisten Browser benutzen einen Faktor von 1.2 oder etwas weniger. Enthält ein Element Text in verschieden großen Schriftarten, dann wird für jede Zeile einzeln die größte resultierende Zeilenhöhe ermittelt und eingesetzt.
<number>: Ein Faktor 'x', der die Zeilenhöhe relativ zur Schriftgröße angibt, als x-faches der Schrifthöhe.
<length>: Eine absolute oder relative Längenangabe.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Eine Angabe, die die Zeilenhöhe relativ zur Schriftgröße definiert, mit der Schriftgröße=100%.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

P { line-height: 133%; }

Browserunterstützung

: Die Eigenschaft line-height wird von allen modernen Browsern ohne Einschränkung unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

font, font-size, vertical-align

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.