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>

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>

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>

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>

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.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'line-height'?
Finden Sie das nützlich?