Unidades en CSS: px, %, em, rem, vh y vw

Publicado: 27/11/2025 Por: Juan Felipe Orozco Cortés
📚 Contenido de la guía ⌃

¿Te ha pasado que algo se ve perfecto en tu pantalla… pero gigante en el celular? ¿O que cambias el tamaño de fuente y, de repente, todo el layout se desordena? La mayoría de esas “peleas” con el diseño vienen de una sola decisión: qué unidad usas en CSS.

En esta guía vamos a construir un mapa mental de las unidades más importantes de CSS: px, %, em, rem, vh y vw. Verás cuándo usarlas, qué problema resuelven y qué errores típicos evitan. La idea no es memorizar definiciones, sino saber qué unidad elegir en cada situación para que tu interfaz sea fluida, legible y adaptable.

El mapa mental: absolutas vs relativas 🧭

Primero, una vista desde arriba. En CSS podemos pensar las unidades en dos grandes familias:

  • Absolutas: no dependen del contexto de la página (por ejemplo, px).
  • Relativas: cambian según el tamaño de su contenedor, de la fuente o de la ventana (%, em, rem, vh, vw).

En esta guía veremos:

  • px: perfecto para bordes finos, iconos, sombras, detalles pixel-perfect.
  • %: ideal para anchos que dependen del contenedor (layouts fluidos).
  • em: relativo al tamaño de fuente del elemento padre (escala local).
  • rem: relativo al tamaño de fuente raíz (html) (escala global).
  • vh y vw: relativos al alto y ancho de la ventana (pantallas completas, secciones “hero”).

Cómo pensar las unidades de CSS

Absolutas Mismo tamaño siempre. Ej: 1px es 1 “pixel” lógico, da igual el contenedor.
Relativas al contenedor Dependen del padre. Ej: width: 50%; depende del ancho del contenedor.
Relativas a la fuente em y rem: se adaptan a la tipografía, muy útiles para accesibilidad.
Relativas a la ventana vh y vw: ideales para secciones que ocupan “pantallas completas”.
Figura 1: Más que memorizar, queremos saber a qué “referencia” está atada cada unidad.
Unidad Relativa a… Uso típico
px Pixel lógico de la pantalla Bordes, iconos, sombras, detalles muy precisos.
% Medida del contenedor (ancho/alto) Layouts fluidos, columnas, imágenes responsivas.
em Fuente del elemento padre Padding/margins que escalan junto con el texto local.
rem Fuente de html (raíz) Sistema global de tamaños (tipografía, espaciado). Muy usado en diseño moderno.
vh Altura de la ventana (viewport) Secciones que deben ocupar X% del alto de la pantalla.
vw Ancho de la ventana (viewport) Texto / contenedores fluidos según el ancho del dispositivo.

1. px: el ladrillo básico de la web

px es la unidad más conocida. Representa un “pixel lógico” de la pantalla, y aunque los dispositivos tengan diferentes densidades, el navegador se encarga de escalarlo. Es una unidad absoluta: si dices 16px, serán 16px aquí y en la China.

Es ideal cuando necesitas precisión:

  • Bordes finos (1px, 2px).
  • Iconos y elementos que deben alinearse al pixel.
  • Sombras, outlines, detalles visuales.

Ejemplo simple con px:

.card {
  width: 320px;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

Problema: si usas px para todo (incluyendo fuentes y espaciado global), tu diseño puede ser menos accesible y menos flexible cuando el usuario cambia el tamaño de fuente del navegador.

2. %: adaptarse al contenedor

La unidad % no vive sola: siempre es “un porcentaje de algo”. Ese “algo” suele ser el tamaño del contenedor (por ejemplo, el width del elemento padre).

Ejemplo de columnas fluidas con %:

.layout {
  display: flex;
  gap: 16px;
}

.col {
  width: 50%; /* la mitad del contenedor */
}

Visualmente:

Columna 1 (50%)
Columna 2 (50%)

Usa % cuando quieras que un elemento se adapte al tamaño de su padre (por ejemplo: imágenes responsivas, columnas que se achican en móviles, barras de progreso, etc.).

3. em vs rem: unidades que “piensan” en texto

Tanto em como rem son relativas al tamaño de fuente:

  • 1em = tamaño de fuente del elemento padre.
  • 1rem = tamaño de fuente del elemento raíz (html).

Esto las hace perfectas para construir diseños que escalen cuando el usuario aumenta la fuente del navegador (accesibilidad).

3.1 rem: sistema de diseño global

Ejemplo: definimos un sistema base de tamaños con rem:

html {
  font-size: 16px; /* 1rem = 16px */
}

h1 {
  font-size: 2rem;   /* 32px */
}

p {
  font-size: 1rem;   /* 16px */
}

.btn {
  padding: 0.75rem 1.5rem; /* padding escala con la fuente raíz */
  border-radius: 0.5rem;
}

Si el usuario aumenta el tamaño de fuente del navegador (por accesibilidad), todo el diseño crece de forma coherente.

3.2 em: escala local según el padre

em se calcula a partir del tamaño de fuente del elemento padre. Esto puede ser útil cuando quieres que el espaciado o los elementos internos crezcan junto con ese componente concreto. 

.card {
  font-size: 1rem;     /* hereda de html = 16px */
  padding: 2em;        /* 2 * 16px = 32px de padding */
}

.card-small {
  font-size: 0.875rem; /* 14px aprox */
  padding: 2em;        /* 2 * 14px = 28px de padding */
}

En ambos casos usamos 2em, pero el valor real cambia según el tamaño de fuente de cada tarjeta. Eso puede ser lo que quieres… o un dolor de cabeza si no lo recuerdas.

💡 Regla práctica: usa rem para tipografía y espaciado global, y deja em para casos puntuales donde necesites que todo un componente escale respecto a su propia fuente.

3.3 La “trampa” del em anidado

Ejemplo de cómo em puede crecer sin que lo notes:

.parent {
  font-size: 1rem; /* 16px */
}

.child {
  font-size: 1.25em; /* 20px (1.25 * 16) */
}

.grandchild {
  font-size: 1.25em; /* 25px (1.25 * 20) */
}

Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.

← Volver a Guías

Comentarios y Valoraciones

No hay comentarios aún. ¡Sé el primero en opinar!

Por favor espere...