Zeilenhöhe: `line-height`

Diese Eigenschaft gibt es seit Version: CSS 1

Durch line-height wird die Zeilenhöhe festgelegt. Sind mehrere Zeilen untereinander vorhanden, so lässt sich auf diesem Wege auch der Zeilenabstand, der sogenannte Durchschuß festlegen.
Ist der Wert von line-height dabei kleiner als die aktuelle Schriftgröße (font-size), so überlagern sich die Zeilen.
Erlaubte Werte sind Zahlen, Längenangaben und Prozentwerte. Im folgenden Beispiel wird dreimal die gleiche Zeilenhöhe demonstriert:

Code-Beispiel für `line-height`:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <title>Bespiel für Zeilenhöhe</title>
  <style type="text/css"> 
    .zahl {line-height: 1.5;}
    .prozent {line-height: 150%;}
    .em {line-height: 1.5em;}
  </style> 
  </head> 
  <body> 
    <p class="zahl">Ein Absatz mit einer Zeilenhöhe von 1.5.</p>

    <p class="prozent">Ein Absatz mit einer Zeilenhöhe von 150%.</p>
    <p class="em">Ein Absatz mit einer Zeilenhöhe von 1.5em. </p>
  </body> 
</html>

Beispiel ansehen

Initialwert:	normal
Vererbbar:	Ja
Anwendbar auf:	Alle Elemente
Medium:	Visual
Werte:	normal Normale in der Schrift definierte Zeilenhöhe Zahl, Längenangabe oder Prozentangabe Inherit

Anmerkung: um Vererbungsprobleme und Textüberlagerung zu vermeiden, empfiehlt es sich, die line-height einfach als Zahl ohne Einheit zu verwenden. Bei 1.5 ist dann z.B. die Zeilenhöhe immer anderthalbmal so hoch wie die Schriftgröße.

Wert