Think of `em` like a percentage of the current font size. So if you have a `div` with a font size of 16px, then a `p` tag within that with a font size of `1em`

Think of `em` like a percentage of the current font size. So if you have a `div` with a font size of 16px, then a `p` tag within that with a font size of `1em` will be 16px. If the `p` tag is `0.8em`, then the font size will be 12.8px (or 80% of the current font size). + html = 16px | + div = 1rem (equivalent to 16px) | + p = 0.8em (equivalent to 80% of 1rem, or 16 \* 0.8, or 12.8px) | + small = 0.8em (equivalent to 80% of 0.8em, or 12.8 \* 0.8, or 10.24px) + span = 0.8rem (equivalent to 80% of 1rem, or 16 \* 0.8, or 12.8px) So by changing the font size of your `div`, all child elements that use `em` will automatically re-render as well (but child elements using `rem` won't resize, because their size isn't affected unless the `html` font size is changed). The "current font size" is determined by lookup up the hierarchy to the nearest parent element with a specified font size, ending with the `html` element which will reflect the browser's default font size if nothing else has been set.