line-height CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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 zu setzen. 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 gibt sie die Höhe an, 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", 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 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 derfont-familydes Elements. <number>(einheitenlos)-
Der verwendete Wert ist diese einheitenlose
<number>multipliziert mit der eigenen Schriftgröße des Elements. Der berechnete Wert ist derselbe wie die angegebene<number>. In den meisten Fällen ist dies der bevorzugte Weg, umline-heightfestzulegen und unerwartete Ergebnisse durch Vererbung zu vermeiden. <length>-
Die angegebene
<length>wird bei der Berechnung der Zeilenkastenhöhe verwendet. In em-Einheiten angegebene Werte können unerwartete Ergebnisse liefern (siehe Beispiel unten). <percentage>-
Relativ zur Schriftgröße des Elements selbst. Der berechnete Wert ist dieser
<percentage>multipliziert mit der berechneten Schriftgröße des Elements. Prozentuale 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 Sehschwächen sowie Personen mit kognitiven Beeinträchtigungen wie Dyslexie. Wenn die Seite vergrößert wird, um die Textgröße zu erhöhen, sorgt ein einheitenloser Wert dafür, dass die Zeilenhöhe proportional skaliert wird.
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 bequemer, line-height mit der font-Kurzschreibweise wie oben gezeigt festzulegen, aber dies erfordert, dass die font-family-Eigenschaft ebenfalls angegeben wird.
Bevorzugung einheitenloser 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 einheitenlosen line-height-Wert. Das zweite Div mit dem roten Rand 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 Zeilen 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
| Spezifikation |
|---|
| CSS Inline Layout Module Level 3 # line-height-property |