Qual è la differenza tra le unità di misura em e rem?

Le unità em sono relative alla dimensione del carattere dell'elemento genitore. Se la dimensione del carattere del genitore non è impostata esplicitamente, si utilizza quella del suo genitore e così via fino all'elemento radice (html).

Le unità rem sono relative alla dimensione del carattere solo dell'elemento radice (html). Questo le rende più prevedibili e semplifica la gestione di font e dimensioni degli elementi sulla pagina.

Esempio:

HTML:

<div class="parent">
  Testo del genitore
  <div class="child-em">
    Testo figlio em
  </div>
  <div class="child-rem">
    Testo figlio rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Dimensione di base del font per il genitore */
}

.child-em {
  font-size: 1.5em; /* Dimensione del font 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Dimensione di base del font per l'elemento radice */
}

.child-rem {
  font-size: 2rem; /* Dimensione del font 2 * 10px = 20px */
}

Tabella comparativa:

Unità	Riferimento	Prevedibilità	Uso
em	Dimensione del font dell'elemento genitore	Meno prevedibile, dipende dal contesto	Per margini e dimensioni di elementi dipendenti dal testo interno
rem	Dimensione del font dell'elemento radice (html)	Più prevedibile	Per la scalabilità globale di font, margini e dimensioni degli elementi sulla pagina