CursosEmpresasBlogLiveConfPrecios

Comprensión del uso de em en CSS: medidas relativas de fuente

Clase 35 de 56 • Curso Definitivo de HTML y CSS

Clase anteriorSiguiente clase
Resumen

¿Qué es la medida relativa "em" en CSS?

La medida "em" es una unidad de longitud en CSS que se utiliza con frecuencia para especificar tamaños de fuente, márgenes y rellenos. Su característica distintiva es que depende del tamaño de fuente del elemento padre inmediato, lo que la convierte en una medida relativa que puede generar algunas situaciones confusas para los desarrolladores si no se utiliza adecuadamente.

¿Cómo se utiliza la medida "em" en CSS?

Para comprender cómo funciona "em", necesitamos explorar un ejemplo básico en el que estilizamos un texto en HTML con CSS. Supongamos que tenemos la siguiente estructura HTML:

<main class="text-container">
  <p>Soy un texto ejemplo</p>
  <div>
    <p>Soy otro texto</p>
  </div>
</main>

Y queremos estilizarlo con CSS, específicamente con la medida "em":

.text-container {
  font-size: 1.5em;
}

Este código indica que queremos que el tamaño de fuente de .text-container sea 1.5 veces el tamaño del elemento padre "directo". En este caso, el elemento padre directo es el <html>, que generalmente tiene un tamaño de fuente predeterminado de 16 píxeles.

Ejemplo práctico de "em"

Supongamos que estamos trabajando en un proyecto CSS con las siguientes reglas:

body {
  font-size: 20px;
}

.text-container {
  font-size: 1em; /* ya no 1.5em */
}

.text-container div {
  font-size: 1.5em;
}

Dado el código anterior:

  • El <p> dentro de .text-container tendría un tamaño de fuente de 20 píxeles, ya que "em" está calculado en función del tamaño de fuente de su padre directo, body.
  • El <p> dentro del <div> tendría 1.5 veces el tamaño de fuente de .text-container, que sería 30 píxeles.

¿Cuáles son las confusiones comunes al usar "em"?

El uso de "em" puede ser problemático, especialmente en estructuras complejas con múltiples niveles de anidamiento de elementos, lo que puede llevar a comportamientos inesperados o no deseados en el tamaño de fuente. Un error común es asumir que todos los elementos dentro de una misma estructura heredarán el mismo tamaño de fuente cuando se usa "em", lo cual no es correcto.

El escenario donde un <div> tiene un font-size de 1.5em tomará el tamaño de fuente del padre inmediato (no ancestro), y así sucesivamente, multiplicando acumulativamente si hay anidaciones de tales situaciones.

Cómo evitar problemas con "em"

  • Uso cuidadoso: Asegúrate siempre de saber cuál es el elemento padre inmediato cuando usas "em", para poder prever el tamaño calculado.
  • Validación visual: Utiliza herramientas como el inspector de elementos del navegador para verificar rápidamente si los tamaños de fuente se comportan como esperas.
  • Estado inicial definido: Establece intencionadamente tamaños de base (font-size) en elementos raíz para mantener consistencia y previsibilidad.

Al final, "em" es una poderosa herramienta cuando se necesita escalabilidad y adaptabilidad en el diseño, pero es crucial comprender su dependencia del contexto para utilizarla correctamente y evitar resultados inesperados.

Mantente atento a la próxima clase, donde exploraremos "rem", la unidad que puede ofrecer una mayor consistencia y previsibilidad en tus proyectos de CSS. ¡Sigue aprendiendo y aplica estos conceptos para mejorar tus habilidades de desarrollo web!