DEV Community

Cover image for Confused About rem and em units in CSS?
Mahesh Patidar
Mahesh Patidar

Posted on

Confused About rem and em units in CSS?

rem and em units in CSS is creating confusion for beginners,

Most beginners don't understand the correct meaning of both units and then use them without thinking much and it creates lots of problems for them.

em and rem both are known as relative units in CSS.

You've probably been using em and rem units now for a while already, but still, you might be confused about which unit is best in which scenario.

What is em?

An em value is equal to the computed font size of the parent of that element. example if font size of parent element is 20 px then 1em is equal to 20px.

if the font size is not specified in the parent element then it will look continues up until the root element.

Root element font size is provided by the browser and by default it is 16px.

in this case, 1em is equal to 16px.

compounding effect of em -

check the below challenge, and then jump on the answer and understand how em works.

We have three divs, container, parent, and child and respectively are specified font-size 1em, 3em, and 2em.

  1. font-size of container is 1em eqaul to 16px.

  2. font size of parent is 3em means 3 * 16px ( parent font-size) so it becomes 48px now.

  3. font size of child is 2em means 2 * 48px ( size of parent element) so it becomes 96px now.

the final size of the child becomes 96px, 😅 power of compounding.

check live example 👇

let's see this in action 👇

86pxx.webp

What is rem?

While em is relative to the font size of its direct or nearest parent, rem is only relative to the Html (root) font size.

by default, it is 16px until we didn't specify in the Html element.

rem value is not much convenient when it comes to specifying such as

1rem = 16px

But what if we want to use 10px than we need to calculate the rem value which is equal to 0.625rem.

To solve this problem we have one trick, specify the Html element font size as 62.5%.

than our 1rem becomes 10px and now we are able to calculate size easily.

Which is better?

There’s no better unit really, and it all depends on your personal choice. Some people like to use rem units for consistency and scalability,

while some like to use em units in places where the influence of nearby parent elements would make sense.

I personally use rem more than em but be careful with both, em becomes a trouble when you don't understand the relation between parents and child,

and we already see the example of compounding effect in em. so I like to say use rem more often than em.

If you want to calculate the accurate size in rem and em, then pxtoem website is pretty useful.

Conclusion -

Trying both units and understanding the use cases is most important. I would like to suggest you play with both units and understand both of them.

Let's Connect -

Twitter
Linkedin

Discussion (15)

Collapse
devoskar profile image
Oskar Pietrucha

Correct me if I'm wrong, but the math behind 1em -> 16 px is valid only for the default browser's settings I believe. If user has changed the default fontSize the "1em" means a size equals to the default, normal font.

Collapse
ali6nx404 profile image
Mahesh Patidar Author

That is my assumption because em totally depends on parents size so we can't say it depends on browser default because em uses closest parent size and the default is the last option for us.

Well your point also right if em is using browser size as a parent size.

Collapse
hamzatechpro profile image
HamzaTech-pro

It depends on parent font size

Collapse
joelbonetr profile image
JoelBonetR

That's correct and just what I come to say

Collapse
tolgagnydnn profile image
Tolga Günaydın

this is great thanks bro

Collapse
ali6nx404 profile image
Mahesh Patidar Author

I'm glad you enjoyed reading 😇

Collapse
pierrewahlberg profile image
Pierre Vahlberg

A good concise guide that explains the gist of it. Nice mate 👍

Collapse
ali6nx404 profile image
Mahesh Patidar Author

I'm glad you enjoyed reading 😇

Collapse
romancelink profile image
Constantine

thanks ღ( ´・ᴗ・` )比心

Collapse
antibushitse profile image
antibushitse

Very useful thank you

Collapse
ali6nx404 profile image
Mahesh Patidar Author

I'm glad you enjoyed reading 😇

Collapse
xpanvictor profile image
Xpan Victor

Thanks, that's great

Collapse
ali6nx404 profile image
Mahesh Patidar Author

I'm glad you found it useful 😇

Collapse
romancelink profile image
Constantine

lol

Collapse
islamzsc profile image
Islamzsc

It's great 😊
Can you tell me about vw and vh please 😅