Inspect the working example
The root font is16px. The first pair uses 1.25em on outer and inner sections; the second pair uses 1.25rem on both.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Outer em | 16×1.25 | 20px |
| Inner em | 20×1.25 | 25px |
| Both rem levels | Root 16×1.25 for each | 20px,20px |
Follow the browser mechanism
For font-size, em resolves against inherited font size; rem resolves against the root. The difference becomes visible under nesting. Neither unit is universally better: choose whether local relative growth or a root-based scale matches the task.
Replacing rem with em compounds the inner level
The contrast applies 1.25em to both levels where a root-based 20px pair was intended.
<style>body{margin:8px}</style>
<style>html{font-size:16px}.root-relative{font-size:1.25em}</style><section class="root-relative">Outer<section class="root-relative">Inner</section></section>Outer becomes 20px and inner 25px, rather than the intended 20px at both levels.
Try the repair
If the root becomes 20px, what sizes follow in the original working pairs?
Show the worked answer
em gives 25px then 31.25px; rem gives 25px at both levels.
- Record root and both nested computed sizes.
- Test the intended nesting rather than a single isolated element.