CSS - Unità di misura

Prima di iniziare l'esercizio vero e proprio, vorremmo dare una breve idea sulle unità di misura CSS. CSS supporta una serie di misurazioni incluse unità assolute come pollici, centimetri, punti e così via, nonché misure relative come percentuali e unità em. Questi valori sono necessari durante la specifica di varie misurazioni nelle regole di stile, ad esborder = "1px solid red".

Abbiamo elencato tutte le unità di misura CSS insieme agli esempi appropriati:

Unità Descrizione Esempio
% Definisce una misura come percentuale relativa a un altro valore, in genere un elemento che lo racchiude. p {dimensione carattere: 16pt; line-height: 125%;}
centimetro Definisce una misura in centimetri. div {margin-bottom: 2cm;}
em Una misura relativa per l'altezza di un carattere negli spazi em. Poiché un'unità em è equivalente alla dimensione di un dato font, se assegni un font a 12pt, ogni unità "em" sarà 12pt; quindi, 2em sarebbe 24pt. p {spaziatura lettere: 7em;}
ex Questo valore definisce una misura relativa all'altezza x di un carattere. L'altezza x è determinata dall'altezza della lettera minuscola x del carattere. p {dimensione del carattere: 24pt; line-height: 3ex;}
in Definisce una misura in pollici. p {spaziatura parole: .15in;}
mm Definisce una misura in millimetri. p {spaziatura parole: 15 mm;}
pc Definisce una misura in pica. Una pica equivale a 12 punti; quindi, ci sono 6 pica per pollice. p {font-size: 20pc;}
pt Definisce una misura in punti. Un punto è definito come 1/72 di pollice. body {font-size: 18pt;}
px Definisce una misura in pixel dello schermo. p {padding: 25px;}