px, rem y em: la unidad correcta

Hasta ahora escribiste cosas como width: 300px o padding: 16px sin pensarlo demasiado. En CSS, los números siempre van acompañados de una unidad — y elegir la unidad incorrecta puede hacer que tu diseño rompa la accesibilidad o se comporte diferente a lo que esperabas.

px — la unidad absoluta

px (píxel CSS) es la unidad más directa: lo que escribís es lo que obtenés. border: 2px solid siempre son exactamente 2px, independientemente del contexto.

.tarjeta {
  border: 2px solid teal;   /* bordes: siempre en px */
  border-radius: 8px;       /* detalles geométricos: px */
  padding: 16px;            /* spacing: px por ahora; enseguida veremos rem */
}

Cuándo usar px:

Bordes (border: 1px solid, border: 2px dashed)
Detalles geométricos finos (border-radius: 4px, sombras)
Medidas absolutamente intencionales (un ícono que siempre debe medir 24px)

Cuándo NO usar px:

font-size en px es una práctica desaconsejada — te lo explicamos al final de esta lección.

rem — relativo al root

rem significa “root em”. Se calcula como un múltiplo del font-size del elemento <html>. El navegador establece ese valor por defecto en 16px (salvo que el usuario lo haya cambiado).

Tabla de conversión (con root = 16px por defecto):

`rem`	px computado
`0.75rem`	12px
`0.875rem`	14px
`1rem`	16px
`1.125rem`	18px
`1.25rem`	20px
`1.5rem`	24px
`2rem`	32px

.titulo {
  font-size: 1.5rem;      /* 1.5 × 16 = 24px por defecto */
  margin-bottom: 1rem;    /* 1 × 16 = 16px — predecible y estable */
}

La clave de rem: es predecible y estable. No importa cuán anidado esté el elemento — 1rem siempre es el font-size del <html>. Sin sorpresas.

em — relativo al propio elemento

em usa como referencia el font-size del mismo elemento (o del padre, cuando se usa en la propiedad font-size).

.etiqueta {
  font-size: 20px;  /* declaro la base */
  padding: 0.5em;   /* 0.5 × 20px = 10px */
}

em es útil cuando querés que el espaciado de un componente escale con su propio texto. Pero tiene una trampa en elementos anidados:

body { font-size: 16px; }
.lista { font-size: 0.9em; }        /* 0.9 × 16 = 14.4px */
.lista .item { font-size: 0.9em; }  /* 0.9 × 14.4 = 12.96px */
/* La fuente se achica en cada nivel — "cascada de em" */

Por eso em es frágil para estilos globales. Para tipografía a nivel de página, rem es más seguro.

rem para font-size: el argumento de accesibilidad

Usá rem para font-size, no px. Esta es la regla más importante de esta lección.

Un usuario con visión reducida puede configurar en su navegador un tamaño de fuente mayor (por ejemplo, 20px en lugar de 16px). Si el CSS usa px para definir font-size, esa preferencia es ignorada — el texto siempre mide lo que el CSS dice.

/* ❌ Desaconsejado — ignora la configuración del usuario */
p { font-size: 16px; }
h1 { font-size: 32px; }

/* ✅ Recomendado — respeta las preferencias del usuario */
p { font-size: 1rem; }
h1 { font-size: 2rem; }

Si el usuario eligió 20px como base, 2rem se convierte en 40px automáticamente. Con px, hubiera seguido siendo 32px.

En resumen: px para bordes y detalles; rem para tipografía y espaciado escalable; em para componentes donde el espaciado debe seguir al texto del componente.

Tu turno: en el sandbox, aplicá las tres unidades a la tarjeta de Tienda Nómade y verificá con “Comprobar”.

Nota sobre el motor: el check de padding: 0.5em en .etiqueta compara el valor computado en px (10px), no el valor declarado. Esto es por diseño: el validador mide el efecto final. Si font-size: 20px no estuviera en el starter, el em no sería predecible en el sandbox.