Referencia de unidades CSS
Las unidades de longitud CSS vienen en dos familias: unidades absolutas fijadas a un tamaño físico, y unidades relativas que escalan con la fuente, el padre o el viewport. Para el diseño responsivo usarás sobre todo las relativas — especialmente rem, % y las unidades de viewport.
Actualizado 2026-07-06
Unidades absolutas
| Unidad | Significado |
|---|---|
| px | Píxeles — la unidad base para pantallas. 1px es un píxel independiente del dispositivo. |
| pt | Puntos — 1/72 pulgada. Común en hojas de estilo de impresión. |
| in | Pulgadas — 1in = 96px = 2,54cm. |
| cm | Centímetros — sobre todo para impresión. |
| mm | Milímetros — sobre todo para impresión. |
| pc | Picas — 1pc = 12pt = 1/6 pulgada. Rara. |
Unidades relativas
| Unidad | Significado |
|---|---|
| % | Porcentaje del valor correspondiente del elemento padre. |
| em | Relativo al propio tamaño de fuente del elemento. 1.5em = 1,5× el tamaño de fuente. |
| rem | Relativo al tamaño de fuente de la raíz (html). Predecible para un escalado consistente. |
| ex | La altura x de la fuente actual (rara vez usada). |
| ch | El ancho del carácter '0' en la fuente actual. |
| vw | 1% del ancho del viewport. |
| vh | 1% del alto del viewport. |
| vmin | 1% de la dimensión menor del viewport (ancho o alto). |
| vmax | 1% de la dimensión mayor del viewport. |
| fr | Una fracción del espacio libre en un contenedor de CSS Grid. |
em vs. rem: la distinción clave
Ambas escalan con el tamaño de fuente, pero em es relativa al tamaño de fuente del elemento actual (por lo que se acumula a través de elementos anidados), mientras que rem siempre es relativa al tamaño de fuente de la raíz (por lo que se mantiene predecible sin importar cuán anidado esté). En la duda, rem para tamaños y espaciados da menos sorpresas.
Herramientas relacionadas