DEV Community

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

Confused About rem and em units in CSS?

Mahesh Patidar on October 13, 2021

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 ...
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

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

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

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

I'm glad you enjoyed reading πŸ˜‡

Collapse
 
xpanvictor profile image
Xpan Victor

Thanks, that's great

Collapse
 
ali6nx404 profile image
Mahesh Patidar

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 πŸ˜…

Collapse
 
ritikashishodia profile image
console.log("RiTiKa ShIsHoDiA"); • Edited

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 .....