Usando un valor em crea un tamaño de fuente dinámico o calculado (históricamente la unidad em se derivaba del ancho de una» M » mayúscula en un tipo de letra dado.). El valor numérico actúa como un multiplicador de la propiedad font-size del elemento en el que se utiliza., Considere este ejemplo:
p { font-size: 2em;}en este caso, el tamaño de fuente de los elementos <p> será el doble del calculado font-size heredado por los elementos <p>. Por extensión, un font-size de 1em es igual a la calculada font-size del elemento en el que se utiliza.,
Si un font-size no ha sido establecida en cualquiera de los <p>‘s antepasados, entonces 1em será igual el navegador predeterminado font-size, que es generalmente 16px. Así que, por defecto 1em es equivalente a 16px y 2em es equivalente a 32px., Si vas a establecer un font-size de 20 píxeles en el <body> elemento decir, entonces 1em en el <p> elementos en su lugar sería equivalente a 20px, y 2em sería equivalente a 40px.,
para calcular el em equivalente para cualquier valor de píxel requerido, puede usar esta fórmula:
em = desired element pixel value / parent element font-size in pixels
el em es una unidad muy útil en CSS ya que adapta automáticamente su longitud en relación con la fuente que el lector elige usar.
un hecho importante a tener en cuenta: valores em compuesto., Tome el siguiente HTML y CSS:
html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */}span { font-size: 1.6em;}<div><span>Outer <span>inner</span> outer</span></div>El resultado es:
asumiendo que el valor predeterminado del navegador font-size es 16px, las palabras «outer» se representarían a 16px, pero la palabra «inner» sería renderizado a 25.6 px. Esto es debido a que el interior de la etiqueta <span>‘s font-size es 1.6 em, que es relativo a su padre font-size, que es a su vez, en relación con su progenitor del font-size. Esto a menudo se llama composición.