W3docs
de
Anmelden

CSS line-height Eigenschaft

Die CSS-Eigenschaft line-height legt die Zeilenhöhe fest. Definition, Werte und Beispiele.

Die Eigenschaft line-height legt die Höhe einer Zeilenbox fest und steuert den vertikalen Abstand zwischen den Textzeilen. Sie ist eine der wichtigsten Eigenschaften für die Lesbarkeit: Zu eng zusammenstehende Zeilen sind schwer zu erfassen, während zu weit auseinanderliegende Zeilen einen Absatz zusammenhanglos wirken lassen.

Diese Seite behandelt die Syntax, jeden akzeptierten Wertetyp, warum einheitenlose Werte in der Regel die beste Wahl sind, sowie die Fallstricke bei Zugänglichkeit und Vererbung.

line-height verhält sich je nach Elementtyp unterschiedlich:

  • Bei Blockelementen legt die Eigenschaft line-height die minimale Zeilenhöhe der Zeilenboxen innerhalb des Elements fest.
  • Bei nicht-ersetzbaren Inline-Elementen legt sie die Höhe fest, die bei der Berechnung der Zeilenboxhöhe verwendet wird.
  • Bei ersetzbaren Inline-Elementen wie Buttons oder anderen input-Elementen hat line-height in der Regel keinen Einfluss auf die Berechnung der Zeilenboxhöhe.
Info

Negative Werte sind gültig.

Info

Die Standard-Zeilenhöhe beträgt in den meisten Browsern etwa 110 % bis 120 %.

Die Eigenschaft line-height legt den Durchschuss der Textzeilen fest. Wenn der Wert von line-height größer ist als der Wert von font-size eines Elements, ist die Differenz der Durchschuss des Textes.

Anfangswertnormal
Gilt fürAlle Elemente.
VererbtJa.
AnimierbarJa. Die Zeilenhöhe ist animierbar.
VersionCSS1
DOM Syntaxobject.style.lineHeight = "40px";

Syntax

Syntax der CSS-Eigenschaft line-height

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

Beispiel mit dem Wert normal:

Beispiel der CSS-Eigenschaft line-height mit dem Wert normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: normal (default)</h3>
    <div>This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

Absatz mit der standardmäßigen normalen Zeilenhöhe im Browser

Beispiel mit dem Wert length:

Beispiel der CSS-Eigenschaft line-height mit dem Wert px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 10px</h3>
    <div>This is a paragraph with a specified line-height.
      <br /> The line height here is set to 10 pixels.
    </div>
  </body>
</html>
Probier es selbst »

Beispiel mit dem Wert percentage:

Beispiel der CSS-Eigenschaft line-height mit dem Wert %(Prozent)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h2>line-height: 200%</h2>
    <div>This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
  </body>
</html>
Probier es selbst »

Beispiel mit mehreren Werten:

Beispiel der CSS-Eigenschaft line-height mit den Werten cm, px, %(Prozent), normal und number

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Line-height property example</h2>
    <h3>line-height: 1</h3>
    <div class="a">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 50 pixels.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 0.5 centimeter.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1 centimeter.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>
Probier es selbst »

Wahl eines Werts: einheitenlos vs. mit Einheit

Dies ist die wichtigste Entscheidung beim Festlegen von line-height, und sie hängt davon ab, wie der Wert vererbt wird:

  • Eine einheitenlose Zahl (z. B. line-height: 1.5) wird als Faktor selbst vererbt. Jedes Kindelement multipliziert den Faktor mit seiner eigenen font-size, sodass der Abstand immer korrekt skaliert.
  • Eine Länge oder ein Prozentwert (z. B. 1.5em oder 150%) wird einmalig berechnet an dem Element, wo er deklariert wird, und der resultierende Pixelwert wird vererbt. Kindelemente mit einer anderen font-size behalten diese feste Pixelhöhe, was dazu führen kann, dass Text überlappt.

Vergleichen Sie beide Varianten bei einem Elternelement, dessen Kindelement eine größere Schrift hat:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Recommended: each element scales the factor by its own font-size */
      .good { line-height: 1.5; }
      /* Problematic: computed pixel height is inherited as-is */
      .bad  { line-height: 150%; }
      .child { font-size: 3em; }
    </style>
  </head>
  <body>
    <div class="good">
      Parent text. <span class="child">Big inherited line scales fine.</span>
    </div>
    <div class="bad">
      Parent text. <span class="child">Big inherited line may overlap.</span>
    </div>
  </body>
</html>

Faustregel: Verwenden Sie eine einheitenlose Zahl für Fließtext. Greifen Sie auf eine feste Länge (px/em) nur dann zurück, wenn Sie bewusst eine konstante Zeilenbox möchten, etwa um eine einzelne Textzeile vertikal zu zentrieren, indem Sie line-height auf die Höhe des Elements abstimmen.

Zugänglichkeit

Das Erfolgskriterium WCAG 1.4.12 zur Textabstandsgestaltung erwartet, dass Inhalte auch dann lesbar bleiben, wenn Benutzer den Zeilenabstand auf mindestens das 1,5-Fache der Schriftgröße erhöhen. Ein einheitenloser line-height-Wert von 1.5 oder mehr für Fließtext ist ein sicherer, zugänglicher Standard und verhindert, dass Layouts kaputt gehen, wenn ein Benutzer seinen eigenen Abstand anwendet.

Werte

WertBeschreibungAusprobieren
normalLegt eine normale Zeilenhöhe fest. Dies ist der Standardwert der Eigenschaft.Ausprobieren »
lengthLegt eine feste Zeilenhöhe in px, cm, em usw. fest.Ausprobieren »
numberLegt eine Zahl fest, die mit der aktuellen Schriftgröße multipliziert wird, um die Zeilenhöhe zu bestimmen.Ausprobieren »
%Legt eine Zeilenhöhe als Prozentsatz der aktuellen Schriftgröße fest.Ausprobieren »
calcLegt eine Zeilenhöhe mithilfe einer Berechnung fest.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Hinweis: Die Verwendung der Einheit em wird für skalierbare Zeilenhöhen allgemein empfohlen.

Übung

Übung
Was bewirkt die Eigenschaft 'line-height' in CSS?
Was bewirkt die Eigenschaft 'line-height' in CSS?
Was this page helpful?