Was ist ein "em", wenn die Schriftgröße des Dokuments in ems angegeben ist?

Question

In CSS ist eine em eine relative Einheit basierend auf der Schriftgröße des Dokuments. Also, was genau ist ein em dann, wenn die Schriftgröße des Dokuments selbst in ems gemessen wird? Angenommen, wir sagen:

<style type = "text/css"> 
body 
{ 
    font-size: 1em; 
} 
</style> 

So wird ein em jetzt rekursiv definiert. Wie wird das vom Browser gehandhabt?

Die W3C docs sagen:

Die ‚em‘ Einheit mit dem berechneten Wert der ‚font-size‘ Eigenschaft des Elements gleich ist, auf dem es verwendet wird. Die Ausnahme liegt vor, wenn 'em' im Wert der Eigenschaft 'font-size' selbst auftritt, wobei Fall auf die Schriftgröße des übergeordneten Elements verweist. Es kann für vertikale oder horizontale Messung verwendet werden. (Dieses Gerät ist auch manchmal die Quad-Breite in typographischen Texten genannt.)

Aber was, wenn das Element document.body, so gibt es kein übergeordnetes Element?

Answer 1

body ist nicht das Dokument Root-Element - das ist ein sehr häufiges Missverständnis. Das übergeordnete Element von body ist html, dessen Standardschriftgröße der Standardschriftgröße des Browsers entspricht (normalerweise 16px).

Dies gilt auch, wenn Sie auf beidebody und html einen font-size Wert in ems gesetzt. Also, wenn Sie das tun:

html, body { font-size: 2em; } 

Dann eine Standard-Schriftgröße von 16px unter der Annahme durch den Benutzer gesetzt ist, wird html eine Schriftgröße von 32px haben (das Doppelte der Standardschriftgröße) und body wird eine Schriftgröße hat von 64px (zweimal von seinem Elternteil, html).

---

_{Um genau zu sein, wird das Standard-Schriftgröße ist the initial value, medium des html Elements, das gemäß der Spezifikation auf die Standard-Schriftgröße bevorzugt entspricht, wie durch den Benutzer eingestellt.}

Answer 2

Es wird relativ zu der Standardschriftgröße des Browsers sein, die in einer physischen Größe, z. "10pt".

Answer 3

Es wird der Standardwert des Browsers von 16px, wenn kein Elternelement es definiert hat.

Siehe auch dies: http://pxtoem.com/