Introducción a las unidades em en CSS

Las unidades em permiten definir el tamaño de fuente como un porcentaje del tamaño del elemento padre. Veamos un ejemplo.

Supongamos que tenemos las siguientes etiquetas anidadas:

<div>
	<p>
		texto
	</p>
</div>

Establezcamos el tamaño de fuente para nuestro div:

div {
	font-size: 20px;
}

Y para el párrafo establezcamos un tamaño de 2em. Este valor corresponde a una fuente dos veces más grande que el tamaño de fuente del elemento padre:

p {
	font-size: 2em; /* corresponde a 40px */
}

Ahora establezcamos para el párrafo un tamaño de 0.5em. Este valor corresponde a la mitad del tamaño de fuente del elemento padre:

p {
	font-size: 0.5em; /* corresponde a 10px */
}

El valor 1em hará que la fuente del párrafo sea igual a la del div padre:

p {
	font-size: 1em; /* corresponde a 20px */
}

Tareas prácticas

Supongamos que tenemos un código HTML, para el cual resolveremos tareas:

<ul>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
</ul>

Determina, qué tamaño de fuente en px tendrán las etiquetas li como resultado de ejecutar el siguiente código:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Determina, qué tamaño de fuente en px tendrán las etiquetas li como resultado de ejecutar el siguiente código:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Determina, qué tamaño de fuente en px tendrán las etiquetas li como resultado de ejecutar el siguiente código:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}