Middle+

¿En qué se diferencian rem de em?

sobes.tech AI

Respuesta de la IA

rem y em son unidades relativas de medida en CSS, que se utilizan para definir tamaños, pero difieren en la base de referencia.

em — una unidad relativa basada en el tamaño de fuente del elemento padre. Por ejemplo, si el tamaño de fuente del padre es: 16px, entonces 1em = 16px. Si en un elemento hijo el tamaño de fuente es: 1.5em, su tamaño será 24px.
rem — una unidad relativa basada en el tamaño de fuente del elemento raíz (generalmente <html>). Por ejemplo, si <html> tiene un tamaño de fuente: 16px, entonces 1rem siempre será igual a 16px, independientemente de la anidación.

Diferencia principal:

em depende del contexto (del elemento padre), lo que puede llevar a una cascada en la multiplicación de tamaños en la anidación.
rem siempre es fijo respecto a la raíz, lo que simplifica la gestión de tamaños y los hace más predecibles.

Ejemplo:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px dentro de .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Utiliza rem para tamaños globales para evitar cambios inesperados, y em cuando necesites escalar en relación con el contexto local.

Anterior Siguiente