CSS-Eigenschaft line-height

Die Eigenschaft line-height definiert die Linienhöhe. Es gibt drei Situationen:

Auf Blockebene definiert die Eigenschaft line-height die minimale Zeilenhöhe von Linienrahmen im Element.
Bei nicht ersetzten Inline-Elementen definiert die Eigenschaft line-height die Höhe, die bei der Berechnung der Zeilenrahmenhöhe verwendet wird.
Bei ersetzten Inline-Elementen wie Schaltflächen oder anderen Eingabeelementen hat die Eigenschaft line-height keine Auswirkung.

Negative Werte sind gültig.

Die Standardeinstellung von line-height liegt bei den meisten Browsern bei 110% bis 120%.

Die Eigenschaft line-height wird verwendet, um die Führung von Zeilen eines Textes zu definieren. Wenn der Wert für line-height größer ist als der Wert für font-size eines Elements, ist der Unterschied der führende Text.

Die Eigenschaft line-height hat keine Auswirkung bei der Anwendung auf Inline-Elemente wie Schaltflächen, Bilder usw.

Anfangswert	normal
Gilt für	Listenelemente
Geerbt	Ja
Animierbar	Ja, die Höhe der Linien ist animierbar.
Version	CSS1
DOM Syntax	object.style.lineHeight = "40px";

Syntax

line-height: normal | number | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div{
      line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft line-height</h2>
    <h3>line-height: normal (voreingestellt)</h3>
    <div>Das ist ein Absatz mit einer Standardzeilenhöhe.<br>
      Die Standardzeilenhöhe liegt in den meisten Browsern bei 110% bis 120%.
    </div>
  </body>
</html>

Versuch es selber!

Im folgenden Beispiel wird die Höhe der Linien durch "px" angegeben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div{
      line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft line-height</h2>
    <h3>line-height: 10px</h3>
    <div>Das ist ein Absatz mit einer bestimmten Zeilenhöhe.<br>
      Die Zeilenhöhe ist hier auf 10 Pixel eingestellt.
    </div>
  </body>
</html>

Versuch es selber!

Im folgenden Beispiel wird die Höhe der Linien durch Prozentwerte angegeben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft line-height</h2>
    <h2>line-height: 200%</h2>
    <div>Das ist ein Absatz mit einer größeren Zeilenhöhe.<br>
     Die Zeilenhöhe ist hier auf 200% eingestellt.
    </div>
  </body>
</html>

Versuch es selber!

Ein Beispiel, das alle Werte dieser Eigenschaft enthält.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.a {
      line-height: 1;
      }
      div.b {
      line-height: 50px;
      }
      div.c {
      line-height: 0.5cm;
      }
      div.d {
      line-height: 1cm;
      }
      div.e {
      line-height: 200%;
      }
      div.f {
      line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft line-height</h2>
    <h3>line-height: 1</h3>
    <div class="a">Das ist ein Absatz mit einer bestimmten Zeilenhöhe.<br>
      Die Zeilenhöhe ist hier auf 1 eingestellt.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">Das ist ein Absatz mit einer bestimmten Zeilenhöhe.<br>
      Die Zeilenhöhe ist hier auf 50 Pixel eingestellt.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">Das ist ein Absatz mit einer bestimmten Zeilenhöhe.<br>
      Die Linienhöhe ist hier auf 0,5 Zentimeter eingestellt.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">Das ist ein Absatz mit einer bestimmten Zeilenhöhe.<br>
      Die Linienhöhe ist hier auf 1 Zentimeter eingestellt.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">Das ist ein Absatz mit einer größeren Zeilenhöhe.<br>
     Die Zeilenhöhe ist hier auf 200% eingestellt.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">Das ist ein Absatz mit einer Standardzeilenhöhe.<br>
      Die Standardzeilenhöhe liegt in den meisten Browsern bei 110% bis 120%.
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
normal	Definiert eine normale Linienhöhe. Es ist der Standardwert dieser Eigenschaft.
length	Definiert eine feste Zeilenhöhe in px, cm usw.
number	Definiert eine Zahl, die mit der aktuellen Schriftgröße multipliziert wird, um die Zeilenhöhe einzustellen.
%	Definiert eine Zeilenhöhe in Prozent der aktuellen Schriftgröße.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.