Unidades de medida en CSS

Casi todo en CSS se mide: tamaños de letra, anchos, márgenes, bordes. Elegir bien la unidad es la diferencia entre un diseño que se adapta a cualquier pantalla y uno que se rompe en cuanto cambias el tamaño de la ventana.

Las unidades se escriben pegadas al número, sin espacio: 16px, no 16 px. La única excepción es el cero, que no necesita unidad: margin: 0.

Píxeles: px

La unidad más intuitiva. 1px es un punto de la pantalla “de referencia” (en pantallas de alta resolución, un px de CSS puede ocupar varios píxeles físicos).

border: 1px solid #ccc;
border-radius: 8px;

Es perfecta para cosas que no deben cambiar de tamaño: bordes, sombras, radios de las esquinas. Para textos y anchos de maquetación hay opciones mejores.

Porcentajes: %

Son relativos al elemento padre:

.columna { width: 50%; }   /* la mitad del ancho del padre */
img { max-width: 100%; }  /* nunca más ancha que su contenedor */

Son la base de los diseños flexibles. Ojo: en height, un porcentaje solo funciona si el padre tiene una altura definida.

Relativas a la letra: em y rem

• em: relativa al tamaño de letra del propio elemento (o del padre, si hablamos del font-size). Si un elemento tiene font-size: 20px, entonces 1em = 20px.
• rem (root em): relativa al tamaño de letra del elemento raíz, el <html>. Por defecto, en casi todos los navegadores es 16px.

html { font-size: 16px; }
h1 { font-size: 2.5rem; }   /* 40px */
p  { font-size: 1rem; }     /* 16px */
.boton {
  font-size: 1rem;
  padding: 0.5em 1em;       /* crece si el botón tiene letra más grande */
}

El problema de em es que se multiplica al anidar: un 1.2em dentro de otro 1.2em dentro de otro 1.2em acaba siendo 1.728em. rem siempre se calcula desde la raíz, así que es predecible.

Recomendación:

• Tamaños de letra: rem. Así respetas el tamaño de letra que la persona haya elegido en su navegador, algo muy importante para quien ve mal.
• Espaciados que deben crecer con el texto (el padding de un botón): em.

Relativas a la ventana: vw y vh

• 1vw = 1 % del ancho de la ventana.
• 1vh = 1 % del alto de la ventana.

.portada { min-height: 100vh; }   /* ocupa al menos toda la pantalla */
h1 { font-size: 6vw; }            /* crece con la ventana */

En móviles, 100vh puede quedar más alto que la pantalla visible por culpa de la barra del navegador. Las unidades modernas dvh (dynamic viewport height) y svh solucionan eso: min-height: 100dvh.

Otras unidades útiles

Unidad	Significado	Uso típico
ch	Ancho del carácter “0”	max-width: 65ch para líneas de texto legibles
fr	Fracción del espacio libre (solo en Grid)	grid-template-columns: 1fr 2fr
vmin / vmax	1 % del lado menor / mayor de la ventana	Elementos cuadrados que caben en pantalla

Unidades absolutas: cm, mm, in, pt

Corresponden a medidas físicas (1in = 2,54 cm = 96px; 1pt = 1/72 de pulgada). En pantalla no tienen mucho sentido, porque cada pantalla tiene un tamaño distinto. Se usan en hojas de estilo para imprimir:

@media print {
  body { font-size: 11pt; margin: 2cm; }
}

Mezclar unidades con funciones

calc() hace operaciones, incluso con unidades distintas:

.contenido { width: calc(100% - 250px); }   /* todo menos la barra lateral */
.hueco { margin-top: calc(1rem + 2vh); }

Los espacios alrededor de + y - son obligatorios.

min() y max() eligen el menor o el mayor de varios valores:

.contenedor { width: min(1100px, 100% - 32px); }  /* 1100px como mucho */

clamp(mínimo, ideal, máximo) es la estrella del diseño responsive: un valor que crece con la pantalla pero nunca baja del mínimo ni pasa del máximo.

h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }

En un móvil, el título mide 1.8rem; en un monitor grande, 3.5rem; entre medias, crece suavemente. Sin una sola media query.

Resumen: ¿qué unidad uso?

Para…	Usa
Tamaños de letra	rem (o clamp() con rem y vw)
Anchos de columnas y bloques	%, fr, max-width
Ancho máximo de un texto	ch
Márgenes y rellenos	rem (o em si deben crecer con la letra del elemento)
Bordes, sombras, radios	px
Alturas de pantalla completa	vh / dvh
Impresión	pt, cm, mm