How does rem differ from em in CSS?

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

em gives the ability to control an area of a design. As in, scale the type in that specific area relatively. rem gives the ability to scale type across the entire page easily.

The unit rem (root em) stands for the font size of the root element. In an HTML document, the root element is the html element.

EMs are relative to their parent's font size

REMs are relative to a base font-size

This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.