Mr. Alien Mr. Alien - 2 months ago 7
CSS Question

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

Answer

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.

Comments