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 einer Zeilenbox in horizontalen Schreibmodi fest. In vertikalen Schreibmodi legt sie die Breite einer Zeilenbox fest. Sie wird häufig verwendet, um den Abstand zwischen Textzeilen festzulegen. Bei Block-Elementen in horizontalen Schreibmodi bestimmt sie die bevorzugte Höhe der Zeilenboxen innerhalb des Elements und bei nicht-ersetzten Inline-Elementen die Höhe, die zur Berechnung der Zeilenbox-Hö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 einer der folgenden Werte angegeben:

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

Werte

normal

Abhängig vom Benutzeragenten. 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 dieser 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 von Vererbung zu vermeiden.

<length>

Die angegebene <length> wird bei der Berechnung der Zeilenbox-Höhe verwendet. In em-Einheiten angegebene Werte können unerwartete Ergebnisse erzeugen (siehe Beispiel unten).

<percentage>

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

Barrierefreiheit

Verwenden Sie für line-height einen Mindestwert von 1,5 für den Hauptabsatzinhalt. Dies hilft Menschen mit Sehschwächen sowie Menschen mit kognitiven Beeinträchtigungen wie Dyslexie. Wenn die Seite gezoomt wird, um die Schriftgröße zu erhöhen, stellt ein einheitsloser Wert sicher, dass die Zeilenhöhe proportional skaliert wird.

W3C Verständnis von 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 mit dem font-Shorthand festzulegen, wie oben gezeigt, 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 Rand, verwendet einen einheitslosen line-height-Wert. Das zweite Div, mit dem roten Rand, verwendet einen line-height-Wert in em.

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 Linien in vertikalen Schreibmodi

Die line-height-Eigenschaft kann verwendet werden, um den Abstand zwischen vertikalen Linien 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

Siehe auch