Search code examples
css

How does rem differ from em in CSS?

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;
}
Solution

  • 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.