CSS Unita' di misura per le dimensioni

Questo è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. Nella pratica comune solo alcune di esse sono realmente usate. Le elenco comunque tutte per completezza:

in (inches - pollici): classica misura del sistema metrico americano. Praticamente nullo il suo valore su un supporto come un browser web viste le variabili relative a risoluzione e ampiezza dei monitor

cm (centimetri): stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta stampata.
mm (millimetri): vedi centimetri.

pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font.

pc (picas): unità poco usata. 1 pica equivale a 12 punti.

em (em-height): 1 em equivale all'altezza media di un carattere per un dato font. E' un unità di misura relativa.

ex (ex-height): poco usata. 1 ex equivale all'altezza del carattere x minuscolo del font scelto.

px (pixels): unità di misura ideale su monitor. E' quella più usata e facile da comprendere.

Di default i browser hanno settato il testo a 16px, quindi  ad esempio ridimensionare il testo al 62.5% ( 16 x 0.625 = 10) equivale  aimpostarlo a 10px.
BODY {font-size:62.5%}

In em, di regola i testi diventano proporzionali e si calcolano sulla grandezza acquisita dall'elemento padre.

Quindi se assegno al div "A" un font-size 1.1em, all'interno di A i font sono a 11 pixel, ma se poi metto un div "B" dentro "A" e setto ancora 1.1em non avrò 11pixel, perchè il calcolo questa volta si fa partendo dalla grandezza del padre che era già a 11px.
Annidando molti div tutti a 1.1em, succede che i testi si ingrandiscono sempre di più.

La formula nucleo di tutto è questa:

child pixels / parent pixels = child ems
12 / 10 = 1.2

quindi partendo dal default 16px per ottenere un corpo 12px
12 / 16 = 0.75 em