¿Qué es un "em" si el tamaño de fuente del documento se especifica en ems?

Question

En CSS, un em es una unidad relativa basada en el tamaño de fuente del documento. Entonces, ¿qué es exactamente un em, si el tamaño de fuente del documento en sí se mide en ems? Supongamos que decimos:

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

Así, un em ahora se define de forma recursiva. Entonces, ¿cómo es manejado por el navegador?

El W3C docs dicen:

La unidad 'em' es igual al valor computado de la propiedad 'font-size' propiedad del elemento en el que se utiliza. La excepción es cuando 'em' aparece en el valor de la propiedad 'font-size', en cuyo caso se refiere al tamaño de la fuente del elemento padre. Se puede usar para mediciones verticales u horizontales. (Esta unidad también a veces se llama el cuádruple ancho en los textos tipográficos.)

Pero ¿y si el elemento es document.body, así que no hay elemento padre?

Answer 1

body no es el elemento raíz del documento, es un error muy común. El elemento principal de body es html, cuyo tamaño de fuente predeterminado coincide con la configuración de tamaño de fuente predeterminada del navegador (generalmente 16px).

Esto se aplica incluso si se establece un valor font-size en ems en tanto y bodyhtml. Así que si usted hizo esto:

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

Entonces, suponiendo un tamaño de fuente predeterminado de 16px según lo establecido por el usuario, html tendrán un tamaño de fuente de 32px (dos veces el tamaño de la fuente por defecto) y body tendrá un tamaño de fuente de 64px (dos veces de su matriz, html).

---

_{Para ser precisos, tamaño de fuente predeterminado del elemento html es the initial value, medium, que de acuerdo con la especificación corresponde al tamaño de fuente predeterminado preferido como establecido por el usuario.}

Answer 2

Será relativa a cualquiera que sea el tamaño de fuente predeterminado del navegador, que se especificará en un tamaño físico, p. '10pt'.

Answer 3

Tomará el valor predeterminado de los navegadores de 16 px si ningún elemento principal lo ha definido.

también ver esto: http://pxtoem.com/