Care este diferența dintre unitățile de măsură em și rem?

Unitățile em sunt relative la dimensiunea fontului elementului părinte. Dacă dimensiunea fontului părintelui nu este setată explicit, se folosește fontul propriului părinte și așa mai departe până la elementul rădăcină (html).

Unitățile rem sunt relative doar la dimensiunea fontului elementului rădăcină (html). Acest lucru le face mai previzibile și simplifică gestionarea fonturilor și dimensiunilor elementelor de pe pagină.

Exemplu:

HTML:

<div class="parent">
  Textul părintelui
  <div class="child-em">
    Textul copil em
  </div>
  <div class="child-rem">
    Textul copil rem
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Dimensiunea de bază a fontului pentru părinte */
}

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

html {
  font-size: 10px; /* Dimensiunea de bază a fontului pentru elementul rădăcină */
}

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

Tabel comparativ:

Unitate	În raport cu ce se măsoară	Previzibilitate	Utilizare
em	Dimensiunea fontului elementului părinte	Mai puțin previzibil, depinde de context	Pentru marginile și dimensiunile elementelor dependente de textul din interiorul lor
rem	Dimensiunea fontului elementului rădăcină (html)	Mai previzibil	Pentru scalarea globală a fonturilor, marginilor și dimensiunilor elementelor pe pagină