مقارنة وحدة rem بتراكم em | وحدات القياس في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تمنح وحدتا rem و em مرونة رائعة للنصوص، لكن فهم الفرق بينهما يحميك من مفاجآت تضخم الخط داخل العناصر المتداخلة:

وحدة الجذر rem: ترتبط دائماً بحجم خط عنصر الجذر الأساسي للصفحة <html> (وهو افتراضياً 16px في المتصفحات). لذا فإن 1rem تعادل 16px و 1.5rem تعادل 24px بثبات تام مهما تداخلت الحاويات، كما أنها تحترم تلقائياً تكبير الخط المفضل في إعدادات متصفح الزائر!
وحدة العنصر em: عند استخدامها في font-size فإنها تضرب حجم خط الأب المباشر. فإذا وضعت حاوية بحجم 1.5em داخل حاوية أخرى بحجم 1.5em، يتضاعف الرقم تراكمياً من 16px إلى 24px ثم يقفز في الابن الداخلي إلى 36px!

الصف 2 كود برمجي

HTML

<style>
  html { font-size: 16px; }
  .rem-box { font-size: 1.5rem; color: navy; }
  .em-box { font-size: 1.5em; color: crimson; }
</style>
<div class="rem-box">Outer 1.5rem (24px)
  <div class="rem-box">Inner 1.5rem stays 24px!</div>
</div>
<div class="em-box">Outer 1.5em (24px)
  <div class="em-box">Inner 1.5em jumps to 36px!</div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Root Rem Versus Compounding Em مقارنة وحدة rem بتراكم em

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (وحدات القياس في لغة CSS)