Question

In website source, I have sometimes seen developers use the rem unit. Is it similar to em? I tried it to see what it actually does, but what is it relative to?

Demo

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

Answer 1

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.