Unità CSS spiegate

Tutte le unità CSS: assolute, relative ai font, relative alla viewport, le funzioni fluid e le unità di angolo, tempo e risoluzione: rispetto a cosa è misurata ciascuna e quando usarla.

Le unità assolute (px, pt) mantengono una dimensione fissa indipendentemente dal contesto; le unità relative (rem, vw, %) si scalano rispetto a un valore di riferimento. Preferisci rem per le dimensioni del testo: rispetta l'impostazione della dimensione del font di root dell'utente, così la tua tipografia ne onora la preferenza di accessibilità. Usa clamp() per una tipografia fluida che cresce e si riduce con la viewport senza mai superare un limite minimo o massimo.

Tabella di riferimento · 38 unità

38 of 38 rows


Assolute
	1/96 di pollice (il pixel di riferimento CSS).	Dimensionamento fisso della UI: bordi, hairline, dimensioni delle icone.	border: 1px solid #000;
	1/72 di pollice (1pt = 1.333px).	Fogli di stile per la stampa, dove le dimensioni corrispondono alla carta fisica.	font-size: 12pt;
	1 centimetro (≈37.8px).	Layout di stampa che richiedono misure reali.	margin: 2cm;
	1 millimetro (≈3.78px).	Misure di stampa di precisione.	padding: 5mm;
	1 pollice (96px = 2.54cm).	Layout di stampa misurati in pollici.	margin: 1in;
Relative al font
	La dimensione del font dell'elemento stesso (ereditata dal genitore).	Spaziatura che si scala insieme al testo circostante.	padding: 1em;
	La dimensione del font dell'elemento root (l'elemento html).	Dimensioni del testo: rispetta l'impostazione della dimensione del font di root dell'utente.	font-size: 1.25rem;
	La larghezza di avanzamento del glifo '0' nel font corrente.	Imposta una lunghezza di riga leggibile (caratteri per riga).	max-width: 70ch;
	L'altezza-x del font corrente (altezza della 'x' minuscola).	Metriche verticali legate al carattere tipografico.	line-height: 2ex;
	L'altezza delle maiuscole del font corrente (altezza di una lettera maiuscola).	Metriche verticali calibrate sulle maiuscole, più compatte di ex.	padding-top: 0.5cap;
	La larghezza di avanzamento dell'ideogramma '水' (acqua) nel font corrente.	Dimensionamento che segue una cella di carattere CJK.	width: 4ic;
	L'interlinea calcolata dell'elemento stesso.	Dimensiona gli elementi in righe intere di testo.	height: 3lh;
	L'interlinea dell'elemento root.	Spaziatura in multipli dell'interlinea di base del documento.	margin-block: 2rlh;
Relative alla viewport
	Il valore del genitore per la stessa proprietà.	Layout fluidi dimensionati sull'elemento contenitore.	width: 50%;
	1% della larghezza della viewport.	Sezioni full-bleed dimensionate sulla larghezza dello schermo.	width: 100vw;
	1% dell'altezza della viewport.	Sezioni hero o overlay che coprono l'altezza dello schermo.	height: 100vh;
	1% della dimensione minore della viewport.	Dimensiona gli elementi per adattarsi allo schermo in qualsiasi orientamento.	font-size: 5vmin;
	1% della dimensione maggiore della viewport.	Riempi l'asse dominante della viewport.	font-size: 5vmax;
	1% dell'altezza della small viewport (UI del browser completamente visibile).	Sezioni mobile a tutta altezza che stanno sopra la chrome del browser espansa.	height: 100svh;
	1% dell'altezza della large viewport (UI del browser nascosta).	Sfondi che devono coprire lo schermo anche quando la chrome del browser si richiude.	height: 100lvh;
	1% dell'altezza della dynamic viewport, seguendo l'UI del browser che appare e scompare.	La correzione mobile per 100vh: l'altezza si ridimensiona quando compare la chrome del browser.	height: 100dvh;
	1% della larghezza della small viewport.	Controparte in larghezza di svh per lo stato più stretto della viewport.	width: 100svw;
	1% della larghezza della large viewport.	Controparte in larghezza di lvh per lo stato più largo della viewport.	width: 100lvw;
	1% della larghezza della dynamic viewport, seguendo l'UI del browser.	Controparte in larghezza di dvh quando la viewport si ridimensiona con la chrome.	width: 100dvw;
	1% della dimensione della viewport lungo l'asse inline (larghezza nelle modalità di scrittura orizzontali).	Dimensionamento della viewport che segue la direzione di scrittura.	width: 50vi;
	1% della dimensione della viewport lungo l'asse block (altezza nelle modalità di scrittura orizzontali).	Dimensionamento della viewport che resta corretto nelle modalità di scrittura verticali.	height: 50vb;
Fluide
	Un valore preferito vincolato tra un minimo e un massimo.	Tipografia fluida che non supera mai un limite minimo o massimo.	width: clamp(320px, 80vw, 1100px);
	Il più piccolo dei suoi argomenti separati da virgola.	Limita una dimensione perché non superi mai un massimo.	width: min(100%, 600px);
	Il più grande dei suoi argomenti separati da virgola.	Impone una dimensione minima che cresce con la viewport.	width: max(50%, 300px);
Angolo
	1/360 di cerchio completo.	Trasformazioni di rotazione e posizioni angolari dei gradienti.	transform: rotate(45deg);
	Radianti; 1rad ≈ 57.2958deg.	Angoli calcolati matematicamente, come trasformazioni generate.	transform: rotate(1.5708rad);
	Gradianti; 400grad = un cerchio completo.	Valori angolari legacy o in stile topografico.	transform: rotate(100grad);
	1turn = un cerchio completo di 360°.	Rotazioni intere o mezze rotazioni che si leggono a colpo d'occhio.	transform: rotate(0.5turn);
Tempo
	Un secondo.	Durate di animazioni e transizioni.	transition: opacity 0.3s;
	Un millisecondo (1s = 1000ms).	Animazioni e ritardi brevi per il feedback della UI.	animation-duration: 150ms;
Risoluzione
	Punti per pollice dell'output.	Media query di risoluzione per la stampa.	@media (min-resolution: 300dpi)
	Punti per unità px; 1dppx equivale a un display standard da 96dpi.	Media query retina e per alto DPI.	@media (min-resolution: 2x)
	Punti per centimetro (1dppx ≈ 2.54dpcm).	Media query di risoluzione in unità metriche.	@media (min-resolution: 118dpcm)