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 üblicherweise verwendet, um den Abstand zwischen Textzeilen festzulegen. Bei Block-Elementen in horizontalen Schreibmodi gibt sie die bevorzugte Höhe der Zeilenboxen innerhalb des Elements an, und bei nicht-ersetzten Inline-Elementen gibt sie die Höhe an, die zur Berechnung der Zeilenboxhöhe verwendet wird.

Probieren Sie es aus

line-height: normal;

line-height: 2.5;

line-height: 3em;

line-height: 150%;

line-height: 32px;


  

    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy lies a small unregarded yellow sun.
  




#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;

/*  values */
line-height: 3em;

/*  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 eines der folgenden angegeben:

  • eine
  • eine
  • ein
  • 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.

(einheitslos)

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

Die angegebene wird in der Berechnung der Zeilenboxhöhe verwendet. Werte, die in em-Einheiten angegeben sind, können unerwartete Ergebnisse liefern (siehe Beispiel unten).

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

Barrierefreiheit

Verwenden Sie einen Mindestwert von 1.5 für line-height für den Hauptabsatzinhalt. Dies hilft Menschen mit Sehbehinderungen sowie Menschen mit kognitiven Beeinträchtigungen wie Legasthenie. Wenn die Seite vergrößert wird, um die Textgröße zu erhöhen, stellt die Verwendung eines einheitslosen Wertes sicher, dass sich die Zeilenhöhe proportional skaliert.

W3C Understanding WCAG 2.2

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                     |
               |
    

 = 
        |

Beispiele

Einfaches 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 unter Verwendung der font Kurzschreibweise einzustellen, 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, Werte statt Werte zu verwenden. Wir werden zwei

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 in ems definierten line-height Wert.

HTML

html

  
Avoid unexpected results by using unitless line-height.

  Length and percentage line-heights have poor inheritance behavior.





  
Avoid unexpected results by using unitless line-height.

  Length and percentage line-heights have poor inheritance behavior

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 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