Riferimento delle unità CSS
Le unità di lunghezza CSS sono di due famiglie: unità assolute legate a una dimensione fisica e unità relative che scalano con il font, il genitore o il viewport. Per il design responsive userai soprattutto quelle relative — in particolare rem, % e le unità di viewport.
Aggiornato 2026-07-06
Unità assolute
| Unità | Significato |
|---|---|
| px | Pixel — l'unità base per gli schermi. 1px è un pixel indipendente dal dispositivo. |
| pt | Punti — 1/72 di pollice. Comune nei fogli di stile per la stampa. |
| in | Pollici — 1in = 96px = 2,54cm. |
| cm | Centimetri — soprattutto per la stampa. |
| mm | Millimetri — soprattutto per la stampa. |
| pc | Pica — 1pc = 12pt = 1/6 di pollice. Rara. |
Unità relative
| Unità | Significato |
|---|---|
| % | Percentuale del valore corrispondente dell'elemento genitore. |
| em | Relativa alla dimensione del font dell'elemento stesso. 1.5em = 1,5× la dimensione del font. |
| rem | Relativa alla dimensione del font della radice (html). Prevedibile per una scalatura coerente. |
| ex | L'altezza della x del font corrente (raramente usata). |
| ch | La larghezza del carattere '0' nel font corrente. |
| vw | 1% della larghezza del viewport. |
| vh | 1% dell'altezza del viewport. |
| vmin | 1% della dimensione minore del viewport (larghezza o altezza). |
| vmax | 1% della dimensione maggiore del viewport. |
| fr | Una frazione dello spazio libero in un contenitore CSS Grid. |
em vs. rem: la distinzione chiave
Entrambe scalano con la dimensione del font, ma em è relativa alla dimensione del font dell'elemento corrente (quindi si accumula attraverso gli elementi annidati), mentre rem è sempre relativa alla dimensione del font della radice (quindi resta prevedibile per quanto profondo sia l'annidamento). Nel dubbio, rem per dimensioni e spaziature dà meno sorprese.
Strumenti correlati