¿Cuál es el contexto de em?
En este ejemplo:
EL CSS
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
EL HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
¿La palabra "sapo" será 0.5 veces 16px (el tamaño de fuente estándar del navegador) o será 0.5 veces 2em (el tamaño de fuente del h1)?
4 answers
Es igual al calculado valor de la propiedad 'font-size' del elemento en el que se utiliza. La herencia corre por el árbol del documento.
Para responder a tu pregunta, sería 0.5 veces el 2em, que a su vez sería 2 veces cualquiera que sea el tamaño de fuente computado del padre de h1. uf .
También es importante tener en cuenta que si utiliza em en otras propiedades CSS, por ejemplo, width o height, el resultado se calculará a partir del font-size calculado de sea cual sea el elemento al que se aplique width o height, etc...
El siguiente artículo describe el uso y el contexto de la unidad em bastante bien en mi opinión, junto con algunos otros materiales de lectura y recursos... rem las unidades pueden interesarle un poco también.
- http://www.impressivewebs.com/understanding-em-units-css /
- http://snook.ca/archives/html_and_css/font-size-with-rem
- http://caniuse.com/rem
También puede que te guste echar un vistazo a este violín para ver cómo actúa un poco más claro:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-15 12:41:05
El em unit denota el tamaño de fuente del elemento, excepto cuando se usa en el valor de la propiedad font-size, donde denota el tamaño de fuente del elemento padre. En este sentido, en el caso presentado, el contexto es el elemento principal.
En el caso presentado, el tamaño de fuente de la palabra "sapo" es por lo tanto igual al tamaño de fuente del padre de la h1. No se puede inferir ningún valor específico para ella a partir de los datos proporcionados.
Cuando se calcula el tamaño de fuente, el tamaño de fuente del padre de h1 se ha calculado cuando se tratará esta construcción; llamémosla s. Primero se calcula el tamaño de fuente de h1, multiplicando s (el tamaño de fuente del padre) por 2. Luego se calcula el tamaño de fuente del elemento span, multiplicando el tamaño de fuente de su padre por 0.5, produciendo s. Teóricamente, los errores de redondeo podrían causar una desviación mínima en tales procesos, pero la multiplicación por 2 y 0.5 se puede suponer que es exacta en las computadoras.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-15 12:25:31
Lo sería .5 veces el 2em del elemento h1 en contexto.
Para forzarlo a ser relativo al 16px, primero tendría que establecer el padre de h1 en font-size 16px.
.wrapper{font-size: 16px;} h1 { font-size: 2em; } .smaller { font-size: 0.5 em;}
<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>
Así que en este caso,
- el wrapper tiene un tamaño de fuente de 16px
- h1 tiene un tamaño de fuente de 2em de 16px
- span.smaller tiene un tamaño de fuente de 1em (of .wrapper heredado de h1 (.5em de 2em)) de 16px
Tenga en cuenta que em es una medida relativa del contexto que se basa nominalmente en la altura de los caracteres M en la fuente actual. Para todos los intentos, h1 tiene un tamaño y un alcance de 32px.más pequeño tiene un tamaño de 16px.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-15 12:06:33
Depende del tamaño de píxel del elemento padre. Si el tamaño del píxel del elemento principal es 16px
.5em será igual a la mitad de su píxel base por lo que será 8px y 2em para h1 será igual a 32px.
Todo depende de cómo haya configurado el tamaño de píxel del elemento padre en su CSS.
Http://pxtoem.com/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-15 12:16:34