em o'lchov birliklari rem o'lchov birliklaridan qanday farq qiladi?

em birliklari, ota-ona elementining shrift o'lchamiga nisbatan. Agar ota-ona elementining shrift o'lchami aniq belgilangan bo'lmasa, uning o'z ota-ona elementining shrift o'lchami ishlatiladi va shunday davom etadi, ildiz elementigacha (html).

rem birliklari esa faqat ildiz element (html) ning shrift o'lchamiga nisbatan. Bu ularni yanada bashoratli qiladi va sahifadagi shriftlar va o'lchamlarni boshqarishni soddalashtiradi.

Misol:

HTML:

<div class="parent">
  Ota-ona matni
  <div class="child-em">
    Bolalar em matni
  </div>
  <div class="child-rem">
    Bolalar rem matni
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Ota-ona uchun asosiy shrift o'lchami */
}

.child-em {
  font-size: 1.5em; /* Shrift o'lchami 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Asosiy shrift o'lchami ildiz element uchun */
}

.child-rem {
  font-size: 2rem; /* Shrift o'lchami 2 * 10px = 20px */
}

Taqqoslash jadvali:

Birlik	Nima bilan nisbatan o'lchanadi	Bashorat qilish qiyinligi	Foydalanish
em	Ota-ona elementining shrift o'lchami	Kamroq bashorat qilinadigan, kontekstga bog'liq	Ichki matnga bog'liq bo'shliq va o'lchamlar uchun
rem	Asosiy element (html) ning shrift o'lchami	Ko'proq bashorat qilinadigan	Sahifadagi shriftlar, bo'shliq va o'lchamlarni global ravishda o'lchash uchun