What is the difference between em and rem?

Question

What is the difference between em and rem values?

Answer

Both em and rem are calculated based on font-size. The key difference between the two is how local the font-size is. The pixel value of 1em is calculated based on the font-size of that element’s parent. In contrast, the pixel value of 1rem is based on the font-size of the root element, which is the html element.

Here is an example -

HTML

<div>
   <p>here is some text</p>
</div>

CSS

html {
   font-size: 16px;
}
div {
   font-size: 12px;
}

In the above code, with p set to 1em, it’s font-size would be 12px, based on the div parent element. Set to 1rem, you would get 16px, based on the root.

mdn article on font-size

1 Like