القاعدة بسيطة:

• rem = القيمة × حجم خط العنصر الجذري html.
• em = القيمة × حجم خط العنصر الأب.

مثال محلول

إذا كان حجم خط html يساوي 20px، والعنصر h1 داخله مباشرة:

html { font-size: 20px; }

h1 { font-size: 2rem; }    /* 2 × 20 = 40px */
h1 { font-size: 1.5em; }   /* 1.5 × 20 = 30px */

هنا الأب هو html نفسه، لذلك تُحسب em من 20px أيضًا. لكن لو كان h1 داخل عنصر حجم خطه 24px، لأصبحت 1.5em تساوي 36px، بينما تبقى 2rem على 40px.