quitar - padding-top css ejemplos

Margen y relleno usando em

Question

Cuando se aplica 1em a un elemento, toma el valor predeterminado del navegador (generalmente, 16px) o el valor del tamaño de fuente de su padre, ¿no? Pero me di cuenta de 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 padre El elemento se establece en font-size: 16px .

Sin embargo, usando algo como el tamaño de fuente: 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 en función de su padre (o el valor predeterminado proporcionado por el navegador). Dado que el font-size de font-size proporcionado por el navegador de h1 es de 32 píxeles, el margen resultante es de 32 píxeles.

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

Al establecer font-size: 100%; o font-size: 1em; en un elemento, le está diciendo que use el 100% del tamaño de fuente de su padre, por lo que establecer 1em como una longitud en cualquier otra cosa seguirá ese 100%.

Answer 2

1em es igual al tamaño de fuente del elemento en cuestión . Por lo tanto, cuando se usa con márgenes, será equivalente al tamaño de fuente del elemento, también se aplicará el margen.