Dieline-heightCSS-Eigenschaft legt die Höhe eines Zeilenkastens in horizontalenSchreibmodi fest. In vertikalen Schreibmodi legt sie die Breite eines Zeilenkastens fest. Sie wird häufig verwendet, um den Abstand zwischen Textzeilen festzulegen. Auf Block-Elementen in horizontalen Schreibmodi gibt sie die bevorzugte Höhe der Zeilenkästen innerhalb des Elements an, und auf 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>  <div>    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 multipliedby 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;

Dieline-height-Eigenschaft wird wie folgt angegeben:

• eine<number>
• eine<length>
• eine<percentage>
• das Schlüsselwortnormal.

Werte

normal

Hängt vom Benutzeragenten ab. Desktop-Browser (einschließlich Firefox) verwenden einen Standardwert von ungefähr1.2, abhängig von derfont-family des Elements.

<number> (nicht mit Einheit)

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

<length>

Die angegebene<length> wird bei der Berechnung der Zeilenkastenhöhe verwendet. Werte inem-Einheiten 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.Prozent-Werte können unerwartete Ergebnisse liefern (siehe das zweite Beispiel unten).

Barrierefreiheit

Verwenden Sie für den Haupttextinhalt einen Mindestwert von1.5 fürline-height. Dies wird Personen mit Sehbehinderungen sowie Personen mit kognitiven Problemen wie Legasthenie helfen. Wenn die Seite vergrößert wird, um die Textgröße zu erhöhen, stellt ein einheitsloser Wert sicher, dass die Zeilenhöhe proportional skaliert wird.

W3C Understanding WCAG 2.2

Formale Definition

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 mithilfe derfont-Kurzform wie oben gezeigt festzulegen, aber dies erfordert, dass diefont-family-Eigenschaft ebenfalls angegeben wird.

Bevorzugen Sie einheitslose Zahlen für line-height-Werte

Dieses Beispiel zeigt, warum es besser ist,<number>-Werte anstelle von<length>-Werten zu verwenden. Wir verwenden zwei<div>-Elemente. Das erste div mit dem grünen Rand verwendet einen einheitslosenline-height-Wert. Das zweite div mit dem roten Rand verwendet einen inems definiertenline-height-Wert.

HTML

<div>  <h1>Avoid unexpected results by using unitless line-height.</h1>  Length and percentage line-heights have poor inheritance behavior.</div><div>  <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 Linien in vertikalen Schreibmodi

Dieline-height-Eigenschaft kann verwendet werden, um den Abstand zwischen vertikalen Linien in vertikalen Schreibmodi anzupassen.

<div>  古池や蛙飛び込む水の音<br />  ふるいけやかわずとびこむみずのおと<br />  富士の風や扇にのせて江戸土産<br />  ふじのかぜやおうぎにのせてえどみやげ<br /></div><div>  古池や蛙飛び込む水の音<br />  ふるいけやかわずとびこむみずのおと<br />  富士の風や扇にのせて江戸土産<br />  ふじのかぜやおうぎにのせてえどみやげ<br /></div>

.haiku {  border: 1px solid;  margin-bottom: 1rem;  padding: 0.5rem;  background-color: wheat;  writing-mode: vertical-rl;}.wide {  line-height: 2;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font,font-size
• Durchschuss