Zeilenabstände ändern

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen den Abstand zwischen den Zeilen ändern. In der nächsten Abbildung sehen Sie die Standarddarstellung, während für die darauf folgende Abbildung der Zeilenabstand um die Hälfte erhöht wurde.

Standardeinstellung für den Zeilenabstand in einem Absatz

Abbildung: Die Standardeinstellung für den Zeilenabstand in einem Absatz.

Erhöhter Abstand zwischen den Textzeilen

Abbildung: Erhöhter Abstand zwischen den Textzeilen.

Lösung

Passen Sie den Wert für die Eigenschaft line-height an:

p {
 line-height: 1.5em;
}

Diskussion

Durch eine Erhöhung des Wertes für die Eigenschaft line-height vergrößert sich der Zeilenabstand. Wird der Wert verringert, wird auch der Abstand zwischen den Zeilen kleiner, bis sich die Zeilen möglicherweise überschneiden. Designer unterscheiden zwischen der Zeilenhöhe und dem sogenannten Durchschuss.

Der Wert für line-height kann aus einer Zahl und einer Einheit (z.B. 14pt), nur aus einer Zahl (1.5) oder aus einer Zahl und einem Prozentzzeichen (70%) bestehen. Wurde für line-height nur eine Zahl angegeben, so wird dieser Wert als Skalierungsfaktor für das Element und seine Kindelemente verwendet.

Für line-height können keine negativen Werte angegeben werden.

Die folgenden Regeln setzen die Schriftgröße (font-size) auf 12px und die Zeilenhöhe (line-height) auf 14.4px ((10px * 1.2) * 1.2px = 14.4px):

body {
 font-size: 10px;
}
p {
 font-size: 1.2em;
 line-height: 1.2;
}

Der Wert der Eigenschaft line-height lässt sich auch mit der Eigenschaft font festlegen, wenn er zusammen mit einem Wert für font-size angegeben wird. Durch die folgende Zeile wird der Text in einem p-Element mit einer Größe von 1em in einer serifenlosen Schrift und mit einer Zeilenhöhe von 1.5em dargestellt:

p {
 font: 1em/1.5em sans-serif;
}

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft line-height und das Rezept Bilder als Versalien für weitere Informationen zur Eigenschaft font.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln