Warum ist em nicht so definiert verhalten

Question

ich em in CSS neu sein kann, aber das folgende Beispiel scheint seltsam ...

Docs sagen, dass 1em auf das font-size gleich ist. Alles in meinem Beispiel ist Standard. Also 8em sollte die Größe von 8 Zeilen Text sein, richtig?

div { 
 
    background-color: red; 
 
    height: 8em; 
 
}

<div> 
 
    One<br/> 
 
    Two<br/> 
 
    Three<br/> 
 
    Four<br/> 
 
    Five<br/> 
 
    Six<br/> 
 
    Seven<br/> 
 
    Eight 
 
</div>

https://jsfiddle.net/q8vs7r4u/1/

Es gibt 8 Linien, aber 8 em deckt nur 7 von ihnen. Es scheint, dass 1em nur 7/8 einer Linie oder etwas bedeckt ...

Warum? Was mache ich falsch?

Answer 1

Der Standardwert line-height ist nicht 1, daher ist jede Zeile größer als die Schriftgröße des Texts darin.

Answer 2

Es funktioniert nicht, weil die line-height. Im Mozilla Developer Network finden Sie die folgenden Informationen über den Standardwert des line-height:

Hängt vom Benutzer-Agent ab. Desktop-Browser (einschließlich Firefox) verwenden einen Standardwert von etwa 1,2, abhängig von der Schriftfamilie des Elements.
https://developer.mozilla.org/en/docs/Web/CSS/line-height

Auf dem folgenden Code wird die line-height-1em zurückgesetzt werden und der gesamte Text paßt die div:

div { 
 
    background-color:red; 
 
    height:8em; 
 
    line-height:1em; 
 
}

<div> 
 
    One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight 
 
</div>

Von der offiziellen W3C-Spezifikation:

Weist Benutzeragenten an, den verwendeten Wert basierend auf der Schriftart des Elements auf einen "angemessenen" Wert zu setzen. Der Wert hat die gleiche Bedeutung wie. Wir empfehlen einen gebrauchten Wert für 'normal' zwischen 1.0 und 1.2. Der berechnete Wert ist 'normal'.
https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Aber jeder User-Agent (Browser) definiert die Höhe der line-height sich auf den empfohlenen Wert zwischen 1,0 und 1,2!

Answer 3

Festlegen eines line-height von 1em die erwarteten Ergebnisse zu sehen:

div { 
    background-color: red; 
    height: 8em; 
    line-height: 1em; 
} 

Answer 4

Die Höhe eines line box ist nicht durch font-size bestimmt. Oder nicht direkt, zumindest.

Sie können die detailed rules in der Spezifikation sehen.Wenn eine Linienbox nur nicht ersetzte Inline-Boxen mit denselben line-height und vertical-align enthält, sagen diese Regeln, dass die Höhe der Linienbox durch die line-height der Inline-Boxen angegeben wird.

Dies trifft auf Ihren Fall zu, da Text, der direkt in einem Blockcontainerelement enthalten ist, in anonymous inline box eingeschlossen ist.

Wenn Sie line-height einen expliziten Wert nicht setzen, wird die Höhe der Zeilen-Box durch den Anfangswert von line-height gegeben werden, normal, die wie folgt verhält:

Weisen Benutzeragenten festlegen der verwendete Wert zu einem "vernünftigen" Wert basiert auf der Schriftart des Elements. Der Wert hat die gleiche Bedeutung wie <number>. Wir empfehlen einen gebrauchten Wert für 'normal' zwischen 1.0 bis 1.2. Die computed value ist "normal".

Wenn beispielsweise der Browser 1.15 wählt, wird 1em1/1.15 = 0.8696 der Höhe der Linie abzudecken. Das ist so nah an der 7/8 = 0.8750, die Sie beobachtet haben.

Beachten Sie, dass anonyme Inline-Boxen vererbbare Eigenschaften wie line-height von der übergeordneten Box übernehmen. Dann können Sie die line-height des Blocks auf eine explizite Länge und die Höhe auf diese Länge multipliziert mit der Anzahl der Zeilen festlegen.

div { 
 
    line-height: 1.2em; 
 
    height: calc(1.2em * 8); 
 
    background: red; 
 
}

<div>One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight</div>

Answer 5

1em ist auf die font-size

horizontal gleich. Nicht vertikal. Das em ist die Breite eines 'm'. Es ist typografisch nicht zulässig, sie für den vertikalen Abstand zu verwenden.