Margen y relleno usando em

Question

Cuando se aplica 1em a un elemento, toma el valor predeterminado del navegador (normalmente, 16 px) o el valor de tamaño de fuente de su elemento principal, ¿no es así? Pero noté que si uso algo como margin-top: 1em en un elemento h1 (sin usar una hoja de estilo de reinicio, y por lo tanto, h1 se establece en font-size: 32px), entonces 1em es igual a 32px, incluso si su elemento principal está establecido en font-size: 16px.

Sin embargo, usando algo como el tamaño de letra: 100%; resuelve la discrepancia.

¿Qué me estoy perdiendo?

Answer 1

Cuando se aplica 1em a un elemento, toma el valor predeterminado del navegador (generalmente, 16px) o el valor de tamaño de fuente de su elemento primario, ¿verdad?

No, toma su propio font-size, calculado sobre la base de su matriz (o el valor suministrado en el navegador por defecto). Como el font-size suministrado por el explorador de h1 tiene 32 píxeles, el margen resultante es de 32 píxeles.

Sin embargo, utilizando algo así como tamaño de letra: 100%; resuelve la discrepancia.

Al establecer font-size: 100%; o font-size: 1em; sobre un elemento, estás diciéndole que la utilice el 100% del tamaño de la fuente de su padre, por lo que establecer 1em como una longitud en cualquier otra cosa seguirá a que el 100%.

Answer 2

1em es igual al tamaño de fuente del elemento en la pregunta. Entonces, al usarlo con los márgenes, será equivalente al tamaño de fuente del elemento al que está aplicando el margen también.