em ölçü birimleri ile rem ölçü birimleri arasındaki fark nedir?

em birimleri, ebeveyn öğenin yazı tipi boyutuna göredir. Eğer ebeveynin yazı tipi boyutu açıkça belirlenmemişse, kendi ebeveyninin yazı tipi kullanılır ve bu böyle devam eder, kök öğeye (html) kadar.

rem birimleri ise sadece kök öğenin (html) yazı tipi boyutuna göredir. Bu, onları daha tahmin edilebilir kılar ve sayfadaki yazı tipleri ve boyutların yönetimini basitleştirir.

Örnek:

HTML:

<div class="parent">
  Ebeveyn metni
  <div class="child-em">
    Çocuk em metni
  </div>
  <div class="child-rem">
    Çocuk rem metni
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Ebeveyn için temel yazı tipi boyutu */
}

.child-em {
  font-size: 1.5em; /* Yazı tipi boyutu 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Kök öğe için temel yazı tipi boyutu */
}

.child-rem {
  font-size: 2rem; /* Yazı tipi boyutu 2 * 10px = 20px */
}

Karşılaştırmalı tablo:

Birim	Neye göre ölçülür	Tahmin edilebilirlik	Kullanım
em	Ebeveyn öğenin yazı tipi boyutu	Daha az tahmin edilebilir, bağlama bağlı	İçeriğe bağlı boşluklar ve boyutlar için
rem	Kök öğenin (html) yazı tipi boyutu	Daha tahmin edilebilir	Küresel yazı tipi, boşluk ve boyut ölçeklendirmesi için