EM and REM look the same. Until they don’t.
Both are relative units. But they reference different things.
rem is always based on the root font size. Usually the html element.
em is based on the computed font size of the element. Or its parent, depending on what you are sizing.
Here’s the part that confuses people. em can compound.
If you set font-size in em, the element’s font size changes. Then every em value inside that element scales from this new size. Padding. Margin. Gaps. Everything.
rem does not compound. It always goes back to the root.
A quick mental model.
Use rem when you want consistency across the page. Typography scale. Spacing scale. Layout rhythm.
Use em when you want a component to scale with its own text. Buttons. Chips. Badges. Cards with internal spacing tied to font size.
Rule of thumb. rem for global rules. em for local rules.
If you ever got a button that grows too much inside a container, it was probably em compounding.
Do you default to rem everywhere?
To learn more tips about CSS, make sure to join my newsletter below ❤️