CSS line-height – Referenz, Beispiel und Labor

stylesheet.css · line-height

.probe {
  line-height: 1.8;
}

Der Webautor schreibt einen Absatz, der Browser setzt ihn nach den Regeln des Stylesheets. Groß- und Kleinschreibung, Abstand, Farbe und Schnitt hängen an genau einer Eigenschaft.

berechneter Wertline-height: 1.8

Box-Breite–

Box-Höhe–

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

Die Zahl ohne Einheit

Der Wert kann als Länge, als Prozentwert oder als bloße Zahl angegeben werden, und die Unterschiede zeigen sich erst bei der Vererbung. Länge und Prozentwert werden am Element berechnet und als fertiger Wert weitergereicht; eine Zahl wird selbst vererbt und an jedem Element neu mit dessen Schriftgröße multipliziert.

Das ist der Grund, warum die Zahl fast immer die richtige Wahl ist. Ein Zeilenabstand, der am Wurzelelement als Prozentwert gesetzt wird, gilt als feste Länge auch in einer Überschrift mit doppelter Schriftgröße, wo die Zeilen dann übereinanderliegen. Als Zahl gesetzt, wächst er mit.

Der Ausgangswert normal überlässt die Wahl dem Anwenderprogramm, das sich an der Schrift orientiert; die Seite nennt als üblichen Wert etwa das Anderthalbfache der Schrifthöhe. Er ist damit kein fester Faktor, sondern hängt von der Schriftfamilie ab.

Wo der Abstand tatsächlich sitzt

Der Zeilenabstand ist nicht der Raum zwischen zwei Zeilen, sondern die Höhe eines Kastens um jede Zeile. Die Differenz zwischen dieser Höhe und der Höhe der Schrift wird gleichmäßig oben und unten verteilt.

Daraus folgt zweierlei. Über der ersten und unter der letzten Zeile eines Blocks steht jeweils die halbe Differenz, weshalb ein Block mit großem Zeilenabstand oben und unten mehr Luft hat, als man erwartet. Und ein Wert, der kleiner ist als die Schrifthöhe, ergibt einen negativen Anteil, sodass sich die Zeilen überlappen, ohne dass die Zeilen selbst ihre Größe ändern.

Bei Zeilen mit unterschiedlich großen Zeichen bestimmt außerdem nicht ein einzelner Wert die Höhe der Zeile, sondern die Anordnung aller beteiligten Kästen an der Grundlinie. Ein einzelnes größeres Zeichen kann eine Zeile deshalb höher machen, obwohl der Abstand unverändert ist.

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.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: normal
Berechneter Wert: absoluter Wert für <length> und <percentage>, sonst Spezifizierter Wert
Vererbung: Ja
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: font-size des Elementes selbst
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft line-height