line-height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die line-height CSS-Eigenschaft legt die Höhe eines Zeilenkastens in horizontalen Schreibmodi fest. In vertikalen Schreibmodi legt sie die Breite eines Zeilenkastens fest. Sie wird häufig verwendet, um den Abstand zwischen Textzeilen festzulegen. Bei Block-Elementen in horizontalen Schreibmodi gibt sie die bevorzugte Höhe der Zeilenkästen innerhalb des Elements an, und bei nicht-ersetzten Inline-Elementen legt sie die Höhe fest, die zur Berechnung der Zeilenkastenhöhe verwendet wird.

Probieren Sie es aus

line-height: normal;

line-height: 2.5;

line-height: 3em;

line-height: 150%;

line-height: 32px;

<section id="default-example">
  <div class="transition-all" id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy lies a small unregarded yellow sun.
  </div>
</section>

#example-element {
  font-family: Georgia, sans-serif;
  max-width: 200px;
}

Syntax

css
/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;

Die line-height-Eigenschaft wird als eine der folgenden Möglichkeiten spezifiziert:

  • eine <number>
  • eine <length>
  • eine <percentage>
  • das Schlüsselwort normal.

Werte

normal

Hängt vom Benutzeragenten ab. Desktop-Browser (einschließlich Firefox) verwenden einen Standardwert von ungefähr 1.2, abhängig von der font-family des Elements.

<number> (einheitslos)

Der verwendete Wert ist dieses einheitslose <number>, multipliziert mit der eigenen Schriftgröße des Elements. Der berechnete Wert ist derselbe wie der angegebene <number>. In den meisten Fällen ist dies die bevorzugte Methode, um line-height festzulegen und unerwartete Ergebnisse aufgrund der Vererbung zu vermeiden.

<length>

Die angegebene <length> wird bei der Berechnung der Zeilenkastenhöhe verwendet. Werte, die in em-Einheiten angegeben sind, können unerwartete Ergebnisse erzeugen (siehe untenstehendes Beispiel).

<percentage>

Relativ zur Schriftgröße des Elements selbst. Der berechnete Wert ist dieses <percentage>, multipliziert mit der berechneten Schriftgröße des Elements. Prozentwerte können unerwartete Ergebnisse erzeugen (siehe das zweite Beispiel unten).

Barrierefreiheit

Verwenden Sie für line-height einen Minimalwert von 1.5 für Haupttextinhalte. Dies wird Menschen mit Sehbehinderungen sowie Menschen mit kognitiven Herausforderungen wie Legasthenie helfen. Wenn die Seite vergrößert wird, um die Schriftgröße zu erhöhen, stellt ein einheitsloser Wert sicher, dass die Zeilenhöhe proportional skaliert wird.

W3C Understanding WCAG 2.1

Formale Definition

Anfangswertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Prozentwertebezieht sich auf die Schriftgröße des Elternelements
Berechneter Wertfür Prozent- und Längenwerte die absolute Länge, ansonsten wie angegeben
Animationstypeither number or length

Formale Syntax

line-height = 
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Grundlegendes Beispiel

css
/* All rules below have the same resultant line height */

/* number/unitless */
div {
  line-height: 1.2;
  font-size: 10pt;
}

/* length */
div {
  line-height: 1.2em;
  font-size: 10pt;
}

/* percentage */
div {
  line-height: 120%;
  font-size: 10pt;
}

/* font shorthand */
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
}

Es ist oft bequemer, line-height mithilfe der font-Kurzschreibweise wie oben gezeigt festzulegen, aber dies erfordert, dass die font-family-Eigenschaft ebenfalls angegeben wird.

Bevorzugen Sie einheitslose Zahlen für line-height-Werte

Dieses Beispiel zeigt, warum es besser ist, <number>-Werte anstelle von <length>-Werten zu verwenden. Wir werden zwei <div>-Elemente verwenden. Das erste Div, mit dem grünen Rahmen, verwendet einen einheitslosen line-height-Wert. Das zweite Div, mit dem roten Rahmen, verwendet einen in ems definierten line-height-Wert.

HTML

html
<div class="box green">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior.
</div>

<div class="box red">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior
</div>

<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px, probably not what you want -->

CSS

css
.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

Ergebnis

Abstand zwischen Zeilen in vertikalen Schreibmodi

Die line-height-Eigenschaft kann verwendet werden, um den Abstand zwischen vertikalen Zeilen in vertikalen Schreibmodi anzupassen.

css
.haiku {
  border: 1px solid;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: wheat;

  writing-mode: vertical-rl;
}

.wide {
  line-height: 2;
}

Ergebnis

Spezifikationen

Specification
CSS Inline Layout Module Level 3
# line-height-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch