em = px / parent
18px at an 18px parent is 1em. The same 18px at a 16px parent is 1.125em. 16px inside a 32px heading is 0.5em.
Nested em multiplies, so a child of 1.2em is not 1.2 times the root when an ancestor is already in em. This page uses the parent field. Rem on the same card still uses the root.
| px | em (parent 16px) | em (parent 18px) |
|---|---|---|
| 8 | 0.5 | 0.4444 |
| 10 | 0.625 | 0.5556 |
| 12 | 0.75 | 0.6667 |
| 14 | 0.875 | 0.7778 |
| 16 | 1 | 0.8889 |
| 18 | 1.125 | 1 |
| 20 | 1.25 | 1.1111 |
| 24 | 1.5 | 1.3333 |
| 32 | 2 | 1.7778 |
Also see px to rem, rem to px, and em to px. The other unit groups are on Units.
Divide px by the parent font size. em = px / parent. 18px at an 18px parent is 1em. At a 16px parent, 18px is 1.125em.
1em equals the parent font size, which is not always 16. 16px inside a 32px heading is 0.5em.
They multiply. A child of 1.2em is not 1.2 times the root when an ancestor is already in em.
rem divides by the html font size. em divides by the parent.
