concepto CSS vigente

Unidades CSS

Valores y unidades

Las unidades CSS definen la referencia de medida de cada valor numérico: absolutas (px), relativas al contenedor (%), tipográficas (em, rem) y de viewport (vw, vh). Elegir la unidad correcta determina si el diseño escala, es accesible y se comporta de forma predecible.

Las unidades CSS son el sistema de medida que acompaña a cada valor numérico en el lenguaje. Sin una unidad, la mayoría de los valores CSS no tienen significado: width: 300 no le dice nada al navegador, pero width: 300px sí. La unidad no es un detalle técnico menor — es la que define cuál es la referencia respecto de la que se mide ese número.

El vocabulario de unidades en CSS está dividido en cuatro familias con lógicas distintas. Las unidades absolutas (como px) producen siempre el mismo tamaño físico independientemente del contexto. Las unidades relativas al contenedor (como %) escalan con el tamaño del elemento padre. Las unidades tipográficas (em, rem) escalan con el tamaño de fuente — la diferencia entre ambas es qué fuente toman como referencia. Las unidades de viewport (vw, vh, vmin, vmax) escalan con el tamaño de la ventana del navegador.

Elegir la unidad correcta no es una cuestión de estilo sino de comportamiento: una tipografía declarada en px ignora las preferencias de accesibilidad del usuario; un ancho declarado en % se adapta al contenedor mientras que uno en px no; un espaciado en rem es predecible en cualquier nivel de anidamiento mientras que uno en em puede acumularse inesperadamente. Conocer qué hace cada familia y cuándo usarla es una de las habilidades centrales del CSS cotidiano.

Absolutas px sin contexto siempre el mismo valor Contenedor % relativo al padre escala con el contenedor Tipográficas em rem relativo a fuente escala con el texto Viewport vw vh relativo a ventana escala con la pantalla

Cómo funciona

Unidades absolutas — px

px es el píxel CSS: la unidad absoluta por excelencia. Cuando escribís border: 2px solid, esos 2px son exactamente eso independientemente del tamaño de fuente, del contenedor padre o del viewport. Es la unidad más predecible porque no tiene contexto.

Nótese que el “píxel CSS” no siempre equivale a un píxel físico de la pantalla — en pantallas de alta densidad (Retina, HDPI) un píxel CSS puede corresponder a 2 o 3 píxeles físicos, pero el navegador gestiona esa conversión de forma transparente. Lo que sí garantiza px es que el valor no cambia según el entorno del documento.

.tarjeta {
  border: 1px solid #e2e8f0;   /* bordes: siempre en px */
  border-radius: 8px;          /* detalles geométricos: px */
  width: 320px;                /* ancho fijo intencional: px */
}

Cuándo usar px: bordes (border-width), detalles geométricos (border-radius, sombras), tamaños de íconos fijos, cualquier medida que deba ser absolutamente invariable independientemente del contexto.

Cuándo NO usar px: para font-size en el cuerpo del documento — un font-size en px ignora la preferencia de tamaño de texto que el usuario configuró en su navegador (ver rem más abajo).

Unidades relativas al contenedor — %

El porcentaje expresa el valor como fracción del valor equivalente en el elemento padre. Para width, es el porcentaje del width del padre. Para height, es el porcentaje del height del padre (con matices). Para margin y padding, siempre es porcentaje del width del padre — incluso para los valores verticales.

.columna {
  width: 50%;     /* la mitad del ancho del padre */
}

.imagen {
  width: 100%;    /* ocupa todo el ancho del contenedor */
  max-width: 640px;
}

El porcentaje hace que los elementos respondan al tamaño de su contenedor, que es la base del diseño fluido. Para límites de tamaño (min-width, max-width, min-height, max-height), ver las entradas de width y height.

contenedor 200px 50% = 100px contenedor 120px 50% = 60px el mismo 50% produce tamaños distintos según el contenedor padre

Unidades tipográficas — em y rem

Estas dos unidades escalan con el tamaño de fuente, pero difieren en qué fuente toman como referencia, y esa diferencia es fundamental.

rem — relativo al elemento raíz (<html>)

rem significa “root em”. Siempre se calcula como múltiplo del font-size del elemento <html>, que el navegador establece en 16px por defecto (salvo que el usuario lo haya modificado en su configuración). El resultado es una unidad que es predecible en cualquier nivel de anidamiento: 1rem siempre es el mismo valor, sin importar dónde esté el elemento en el árbol del documento.

/* Con root = 16px por defecto */
.titulo  { font-size: 2rem; }     /* 32px */
.cuerpo  { font-size: 1rem; }     /* 16px */
.pequeño { font-size: 0.875rem; } /* 14px */
.card    { padding: 1.5rem; }     /* 24px — predecible */

em — relativo al font-size del propio elemento

em usa como referencia el font-size del elemento mismo (cuando se usa en propiedades distintas de font-size) o del elemento padre (cuando se usa en font-size). Es útil cuando querés que el espaciado de un componente escale con su propio texto:

.etiqueta {
  font-size: 20px;
  padding: 0.5em;   /* 0.5 × 20px = 10px — escala con el texto */
}

El gotcha de composición de em: cuando los em se anidan en elementos que también tienen font-size en em, los valores se multiplican en cascada y el texto se achica (o agranda) en cada nivel:

body  { font-size: 16px; }
.list { font-size: 0.9em; }       /* 0.9 × 16 = 14.4px */
.list .item { font-size: 0.9em; } /* 0.9 × 14.4 = 12.96px — cascada indeseada */

Este efecto de composición hace que em sea frágil para estilos globales. Para tipografía de página, rem es mucho más seguro.

rem — siempre estable 1rem → 16px 1rem → 16px 1rem → 16px mismo valor siempre em — se acumula 0.9em → 14.4px 0.9em → 12.96px 0.9em → 11.66px se acumula en cada nivel

Unidades de viewport — vw, vh, vmin, vmax

Estas unidades escalan con el tamaño de la ventana del navegador (el viewport):

  • vw (viewport width): 1vw = 1% del ancho de la ventana. 100vw = el ancho completo.
  • vh (viewport height): 1vh = 1% de la altura de la ventana. 100vh = la altura completa.
  • vmin: el menor entre 1vw y 1vh — útil para que algo quepa siempre en pantalla.
  • vmax: el mayor entre 1vw y 1vh.
.hero {
  min-height: 100vh;    /* ocupa toda la altura de la ventana */
}

.titulo-grande {
  font-size: 5vw;       /* escala con el ancho de la ventana */
}

.cuadrado {
  width: 50vmin;        /* siempre cabe en pantalla, portrait o landscape */
  height: 50vmin;
}
viewport (ventana del navegador) 100vw width: 50vw 100vh

Cuándo usar qué

SituaciónUnidad recomendada
Bordes, border-radius, sombras, íconos fijospx
font-size en cuerpo y headingsrem
padding y margin escalablesrem
Espaciado que debe seguir al texto del componenteem
Ancho de columnas fluidas, imágenes responsivas%
Límites de tamaño (max-width)px o rem
Elementos que deben ocupar la pantalla completavh, vw
Tipografía que escala con el viewportvw (con cuidado)

Regla de accesibilidad — rem para font-size: un usuario puede configurar en su navegador un tamaño de fuente mayor (por ejemplo, 20px en lugar de 16px). Si el CSS usa px para font-size, esa preferencia es ignorada. Con rem, el tamaño de fuente del sitio escala junto con la preferencia del usuario. Esta es la razón más importante para no usar px en tipografía.

Notas, gotchas e interacción

  • em en font-size hereda del padre, no del propio elemento. Cuando se usa font-size: 1.2em, el 1.2 es relativo al font-size del padre. En todas las demás propiedades (padding, margin, width…) em es relativo al font-size del propio elemento.
  • % vertical en padding usa el ancho del padre, no la altura. padding-top: 10% y padding-bottom: 10% son el 10% del width del elemento padre, no del height. Esto se usa a veces para crear “aspect ratios” con la técnica del padding-hack.
  • vh no siempre es lo que parece en mobile. En navegadores móviles, la barra de dirección puede aparecer o desaparecer al hacer scroll, cambiando la altura disponible. 100vh puede ser mayor que la altura visible real. Existen las unidades svh/dvh/lvh para distintas definiciones del viewport en mobile, pero aún no son Baseline widely (2026).
  • vw incluye el ancho del scrollbar en algunos navegadores. Esto puede causar scroll horizontal no deseado cuando width: 100vw coexiste con contenido que tiene scrollbar vertical. Alternativa: width: 100% en el body.
  • Para min-width, max-width, min-height, max-height: ver las entradas de width y height.
  • Cicatriz del sandbox: el sandbox de este sitio inyecta box-sizing: border-box globalmente (docs/CICATRICES.md A.1.7), lo que hace que width: 100% con padding no desborde el contenedor.

Vigente / legacy

Todas las unidades documentadas (px, %, em, rem, vw, vh, vmin, vmax) son Baseline widely y vigentes en todos los navegadores modernos. No hay formas legacy para estas unidades.

Las nuevas unidades de viewport mobile (svh, dvh, lvh) son más recientes y todavía no tienen soporte universal completo (2026); se mencionan como expansión futura cuando sea relevante.