DEV Community

Cover image for em VS rem

em VS rem

Abdulqudus Abubakre
Front end developer, JavaScript enthusiast, Community Builder
・2 min read

In the world of CSS and sizing, there are several units that can be used either for your font sizing, margin, padding and so on.

Two commonly used, but slightly confusing units are the rem and em. Both units are relative CSS units (they depend on something else for their sizing). Now how are these two different???


This unit inherits the font size of its nearest parent element having a font-size. I'll be going with a visual representation here to explain how the inheritance works.

inheritance in em

In the image above, the root element has a font size of 36px. The body element which is a child of the root element has a font size of 0.8em, which is equivalent to 80% of the font-size of the root element i.e (0.8 * 36px = 28.8), and it goes on and on. If the immediate parent does not have a set font size, it looks for the parent element having a defined font size.


This unit inherits the font size of the root element. You can think of it as the root em. In this case, rather than inheriting the font size of its immediate element, it inherits that of the html element.

inheritance in rem

Here, no matter how deeply nested the element is, it always finds its way home 😀😀 this case, the root element.

Here's a codepen demo showing em and rem in action.


This a just a look into em and rem, which one you choose is entirely up to you. With em you can have different font sizes for different sections. With rem you have a central controller that you can use to determine sizes of other elements in your html.

Discussion (8)

bayuangora profile image
Bayu Angora • Edited

So, where's rem inherited to if we don't fill anything (margin, padding, font-size, etc) on html class?

danielatwood profile image
Daniel Atwood

I think most browsers default the body to 16px which is what rem would be set to.

ibn_abubakre profile image
Abdulqudus Abubakre Author

Yes, it has a default of 16px

timothyokooboh profile image

One of the "clearest" explanations I have seen on this topic.

ibn_abubakre profile image
rahuldkjain profile image
Rahul Jain

Amazing explanation indeed!

ibn_abubakre profile image
yusufsaif profile image

What a very nice and interesting write up
Hope we will be expecting more right

Forem Open with the Forem app