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-Eigenschaft in CSS setzt die Höhe eines Linienbox in horizontalen Schreibrichtungen. In vertikalen Schreibrichtungen legt sie die Breite einer Linienbox fest. Sie wird häufig verwendet, um den Abstand zwischen Textzeilen festzulegen. Bei Blockelementen in horizontalen Schreibrichtungen spezifiziert sie die bevorzugte Höhe von Linienboxen innerhalb des Elements, und bei nicht-ersetzten Inline-Elementen spezifiziert sie die Höhe, 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", 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;
Werte
Diese Eigenschaft wird als einzelner Wert aus der folgenden Liste angegeben:
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 dieses einheitenlose
<number>multipliziert mit der eigenen Schriftgröße des Elements. Der berechnete Wert entspricht dem angegebenen<number>. In den meisten Fällen ist dies die bevorzugte Methode, umline-heightfestzulegen und unerwartete Ergebnisse aufgrund von Vererbung zu vermeiden. <length>-
Der angegebene
<length>wird bei der Berechnung der Linienbox-Höhe verwendet. Werte in em-Einheiten können unerwartete Ergebnisse liefern (siehe untenstehendes Beispiel). <percentage>-
Bezieht sich auf die Schriftgröße des Elements selbst. Der berechnete Wert ist dieses
<percentage>multipliziert mit der berechneten Schriftgröße des Elements. Prozent-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 den Hauptabsatzinhalt. Dies wird Menschen mit Sehbehinderungen sowie Menschen mit kognitiven Bedenken wie Dyslexie helfen. Wenn die Seite vergrößert wird, um die Textgröße zu erhöhen, stellt ein einheitenloser Wert sicher, 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
Grundlegendes 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-Kurzschrift wie oben gezeigt zu setzen, aber dies erfordert, dass die font-family-Eigenschaft ebenfalls spezifiziert wird.
Bevorzugen Sie einheitenlose 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 Rahmen verwendet einen einheitslosen 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 Schreibrichtungen
Die line-height-Eigenschaft kann verwendet werden, um den Abstand zwischen vertikalen Linien in vertikalen Schreibrichtungen 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 |