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 Juli 2015.
Die line-height-Eigenschaft von CSS legt die Höhe einer Zeilenbox in horizontalen Schreibmodi fest. In vertikalen Schreibmodi bestimmt sie die Breite einer Zeilenbox. 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 Zeilenboxen innerhalb des Elements an, und bei nicht-ersetzten Inline-Elementen gibt sie die Höhe an, 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", serif;
max-width: 200px;
}
Syntax
/* 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 kann auf folgende Weise angegeben werden:
- 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 derfont-familydes Elements. <number>(ohne Einheit)-
Der verwendete Wert ist dieser einheitenlose
<number>multipliziert mit der eigenen Schriftgröße des Elements. Der berechnete Wert ist der gleiche wie der angegebene<number>. In den meisten Fällen ist dies die bevorzugte Methode, umline-heightzu setzen und unerwartete Ergebnisse aufgrund von Vererbung zu vermeiden. <length>-
Die angegebene
<length>wird bei der Berechnung der Zeilenbox-Höhe verwendet. Angaben in em-Einheiten können unerwartete Ergebnisse erzeugen (siehe Beispiel unten). <percentage>-
Relativ zur Schriftgröße des Elements selbst. Der berechnete Wert ist dieses
<percentage>multipliziert mit der berechneten Schriftgröße des Elements. Prozentual angegebene Werte können unerwartete Ergebnisse erzeugen (siehe zweites Beispiel unten).
Barrierefreiheit
Verwenden Sie für den line-height-Wert bei Fließtexten einen Mindestwert von 1.5. Dies wird Menschen mit Sehbeeinträchtigungen sowie Menschen mit kognitiven Anliegen wie Legasthenie helfen. Wenn die Seite vergrößert wird, um die Schriftgröße zu erhöhen, sorgt ein wertloser Wert dafür, dass die Zeilenhöhe proportional skaliert.
Formale Definition
| Anfangswert | normal |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Ja |
| Prozentwerte | bezieht sich auf die Schriftgröße des Elternelements |
| Berechneter Wert | für Prozent- und Längenwerte die absolute Länge, ansonsten wie angegeben |
| Animationstyp | either number or length |
Formale Syntax
line-height =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Einfaches Beispiel
/* 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 "Bitstream Charter",
"Georgia",
serif;
}
Es ist oft praktischer, die line-height-Eigenschaft mit der font-Kurzform zu setzen, wie oben gezeigt, allerdings muss dabei die font-family-Eigenschaft ebenfalls spezifiziert sein.
Bevorzugen Sie wertlose Zahlen für line-height-Werte
Dieses Beispiel zeigt, warum es besser ist, <number>-Werte statt <length>-Werte zu verwenden. Wir verwenden zwei <div>-Elemente. Das erste Div mit dem grünen Rahmen verwendet einen wertlosen line-height-Wert. Das zweite Div mit dem roten Rahmen verwendet einen in em definierten line-height-Wert.
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
.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.
.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
Loading…