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.
font-size of container is 1em eqaul to 16px.
font size of parent is 3em means 3 * 16px ( parent font-size) so it becomes 48px now.
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 👇
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.
Top comments (16)
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.
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.
It depends on parent font size
That's correct and just what I come to say
this is great thanks bro
I'm glad you enjoyed reading 😇
A good concise guide that explains the gist of it. Nice mate 👍
I'm glad you enjoyed reading 😇
thanks ღ( ´･ᴗ･` )比心
Very useful thank you
I'm glad you enjoyed reading 😇
Thanks, that's great
I'm glad you found it useful 😇
lol
It's great 😊
Can you tell me about vw and vh please 😅
thanks for sharing ,I were read diff between rem or em on mdn ,but I am not able to understand what they said that , After read this article ......I understood properly .....