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 Linienbox in horizontalen Schreibmodi fest. In vertikalen Schreibmodi legt sie die Breite einer Linienbox fest. Sie wird häufig verwendet, um den Abstand zwischen Textzeilen zu setzen. Bei Block-Elementen in horizontalen Schreibmodi gibt sie die bevorzugte Höhe der Linienboxen innerhalb des Elements an, und bei nicht-ersetzten Inline-Elementen gibt sie die Höhe an, die zur Berechnung der Linienbox-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>
  • ein <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 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 in die Berechnung der Linienbox-Höhe einbezogen. Werte in em-Einheiten können unerwartete Ergebnisse liefern (siehe untenstehendes Beispiel).

<percentage>

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

Barrierefreiheit

Verwenden Sie einen Mindestwert von 1.5 für line-height für Hauptabsatzinhalte. Dies hilft Menschen mit niedrigem Sehvermögen sowie Menschen mit kognitiven Bedenken wie Legasthenie. Wenn die Seite vergrößert wird, um die Textgröße zu erhöhen, stellt die Verwendung eines einheitslosen Wertes 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 praktischer, line-height bei Verwendung der font Kurzform wie oben gezeigt festzulegen, aber dies erfordert, dass die font-family-Eigenschaft ebenfalls angegeben wird.

Bevorzugung einheitlicher 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, nutzt einen einheitslosen line-height-Wert. Das zweite Div, mit dem roten Rand, verwendet einen line-height-Wert, der in ems definiert ist.

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

BCD tables only load in the browser

Siehe auch