Todas las unidades CSS: absolutas, relativas a la fuente, relativas al viewport, las funciones fluidas y las unidades de ángulo, tiempo y resolución; respecto a qué se mide cada una y cuándo conviene usarla.
Las unidades absolutas (px, pt) mantienen un tamaño fijo sin importar el contexto; las relativas (rem, vw, %) escalan contra un valor de referencia. Prefiere rem para los tamaños de fuente: respeta el ajuste del usuario para el tamaño de fuente raíz, así que tu tipografía honra su preferencia de accesibilidad. Usa clamp() para una tipografía fluida que crece y se encoge con el viewport sin cruzar nunca un límite mínimo o máximo.
Tabla de referencia · 38 entradas
Unidades CSSExplained
38 of 38 rows
Absolutas
1/96 de pulgada (el píxel de referencia CSS).
Tamaño fijo de UI: bordes, líneas finas, dimensiones de iconos.
border: 1px solid #000;
1/72 de pulgada (1pt = 1.333px).
Hojas de estilo de impresión, donde los tamaños corresponden al papel físico.
font-size: 12pt;
1 centímetro (≈37.8px).
Maquetaciones de impresión que necesitan medidas reales.
margin: 2cm;
1 milímetro (≈3.78px).
Medidas de impresión de grano fino.
padding: 5mm;
1 pulgada (96px = 2.54cm).
Maquetaciones de impresión medidas en pulgadas.
margin: 1in;
Relativas a la fuente
El font-size del propio elemento (heredado de su padre).
Espaciado que escala junto con el texto circundante.
padding: 1em;
El font-size del elemento raíz (el elemento html).
Tamaños de fuente: respeta el ajuste del usuario para el tamaño de fuente raíz.
font-size: 1.25rem;
El ancho del glifo '0' en la fuente actual.
Fijar una longitud de línea legible (caracteres por línea).
max-width: 70ch;
La altura x de la fuente actual (altura de la 'x' minúscula).
Métricas verticales ligadas a la tipografía.
line-height: 2ex;
La altura de mayúsculas de la fuente actual (altura de una letra capital).
Métricas verticales ajustadas a las mayúsculas, más compactas que ex.
padding-top: 0.5cap;
El ancho del ideograma '水' (agua) en la fuente actual.
Dimensionado que sigue una celda de carácter CJK.
width: 4ic;
La line-height calculada del propio elemento.
Dimensionar elementos en líneas de texto completas.
height: 3lh;
La line-height del elemento raíz.
Espaciado en múltiplos de la altura de línea base del documento.
margin-block: 2rlh;
Relativas al viewport
El valor del padre para la misma propiedad.
Maquetaciones fluidas dimensionadas según el elemento contenedor.
width: 50%;
El 1 % del ancho del viewport.
Secciones a sangre completa dimensionadas al ancho de la pantalla.
width: 100vw;
El 1 % de la altura del viewport.
Secciones hero u overlays que cubren la altura de la pantalla.
height: 100vh;
El 1 % de la dimensión menor del viewport.
Dimensionar elementos para que quepan en pantalla en cualquier orientación.
font-size: 5vmin;
El 1 % de la dimensión mayor del viewport.
Rellenar el eje dominante del viewport.
font-size: 5vmax;
El 1 % de la altura pequeña del viewport (interfaz del navegador totalmente visible).
Secciones móviles de altura completa que caben sobre la interfaz expandida del navegador.
height: 100svh;
El 1 % de la altura grande del viewport (interfaz del navegador oculta).
Fondos que deben cubrir la pantalla incluso cuando la interfaz del navegador se contrae.
height: 100lvh;
El 1 % de la altura dinámica del viewport, siguiendo la interfaz del navegador al mostrarse y ocultarse.
La solución móvil para 100vh: la altura cambia según aparece la interfaz del navegador.
height: 100dvh;
El 1 % del ancho pequeño del viewport.
Contraparte en anchura de svh para el estado más estrecho del viewport.
width: 100svw;
El 1 % del ancho grande del viewport.
Contraparte en anchura de lvh para el estado más ancho del viewport.
width: 100lvw;
El 1 % del ancho dinámico del viewport, siguiendo la interfaz del navegador.
Contraparte en anchura de dvh cuando el viewport cambia de tamaño con la interfaz.
width: 100dvw;
El 1 % del tamaño del viewport en el eje inline (ancho en modos de escritura horizontales).
Dimensionado según el viewport que sigue la dirección de escritura.
width: 50vi;
El 1 % del tamaño del viewport en el eje block (alto en modos de escritura horizontales).
Dimensionado según el viewport que sigue siendo correcto en modos de escritura verticales.
height: 50vb;
Fluidas
Un valor preferido acotado por un mínimo y un máximo.
Tipografía fluida que nunca cruza un límite mínimo o máximo.
width: clamp(320px, 80vw, 1100px);
El menor de sus argumentos separados por comas.
Limitar un tamaño para que nunca supere un máximo.
width: min(100%, 600px);
El mayor de sus argumentos separados por comas.
Imponer un tamaño mínimo que crece con el viewport.
width: max(50%, 300px);
Ángulo
1/360 de un círculo completo.
Transformaciones de rotación y posiciones angulares de degradados.
transform: rotate(45deg);
Radianes; 1rad ≈ 57.2958deg.
Ángulos calculados matemáticamente, como transformaciones generadas.
transform: rotate(1.5708rad);
Gradianes; 400grad = un círculo completo.
Valores angulares heredados o de agrimensura.
transform: rotate(100grad);
1turn = un círculo completo de 360°.
Rotaciones completas o medias que se leen de un vistazo.
transform: rotate(0.5turn);
Tiempo
Un segundo.
Duraciones de animaciones y transiciones.
transition: opacity 0.3s;
Un milisegundo (1s = 1000ms).
Animaciones y retardos cortos de retroalimentación de UI.
animation-duration: 150ms;
Resolución
Puntos por pulgada de la salida.
Media queries de resolución orientadas a impresión.
@media (min-resolution: 300dpi)
Puntos por unidad px; 1dppx equivale a una pantalla estándar de 96dpi.