Sie sind hier: Startseite -> CSS-Grundlagen -> Absatzformatierung -> Zeilenabstand

CSS-Grundlagen: line-height

Zeilenabstand: Zeilenabstand mit CSS festlegen

Das Erstellen einer Webseite mit CSS ist für jene, die vorher Layouttabellen genützt haben, eine mühsame Qual. Dabei gibt es mittels CSS wunderbare Lösungen, die es vorher gar nicht geben konnte und die, hat man sie einmal erkannt und eingesetzt, sehr viel Spaß bringen. Ein gutes Beispiel für die neuen Lösungen ist beispielsweise der Zeilenabstand.

Gut, Zeilenabstände hat man mit Tabellen auch erreicht, aber hier ist die Rede vom Zeilenabstand innerhalb eines Textes. Es macht einen Unterschied, ob die Textzeilen aneinanderkleben oder einen großen Abstand aufweisen. Kleine Schrift wird besser lesbar, wenn der Abstand größer ist. Text wirkt sehr aggressiv, wenn er sehr dicht geschrieben wird.

Anwendungsbeispiele:

p { line-height: 10px; }
p { line-height: 125%; }
p { line-height: normal; }

Mit dem CSS-Befehl line-height wird der Zeilenabstand eingestellt. Im ersten Beispiel wird einem Absatz per Pixelwert der Abstand zwischen den Zeilen vorgeschrieben. Im zweiten Beispiel bezieht sich die Einstellung auf die Schriftgröße und davon ausgehend wird die 1 1/4fache Größe für den Abstand herangezogen.

Das dritte Beispiel stellt den Zeilenabstand auf den normalen Wert zurück. Hätte man keinen Zeilenabstand eingegeben, wäre das Erscheinungsbild genauso gewesen wie in der Einstellung normal.

ergibt:

Das ist die erste Zeile
Das ist die zweite Zeile

Das ist die erste Zeile
Das ist die zweite Zeile

Das ist die erste Zeile
Das ist die zweite Zeile

Ebenfalls interessant:

Einzug

Informationen über den CSS-Befehl text-indent, mit dem die erste Zeile eines Absatzes via CSS eingezogen oder ausgerückt werden kann.

Zeilenumbruch

Informationen über den CSS-Befehl white-space, mit dem der Zeilenumbruch eingestellt werden kann.

[aktuelle Seite]

Zeilenabstand

Informationen über den CSS-Befehl line-height, mit dem der Zeilenabstand in einem Text via CSS eingestellt werden kann.

Vertikale Ausrichtung

Informationen über den CSS-Befehl vertical-align, mit dem Text auf einer Webseite vertikal angepasst werden kann.

Horiz. Ausrichtung

Informationen über die horizontale Ausrichtung mit CSS durch den CSS-Befehl text-align.

Zurück zum Hauptthema

Übersicht Absatzformatierung

Startseite CSS-Grundlagen