Differentiate REM vs EM vs PX
You may be confused about what rem and em are because we often use px as a CSS unit. Well, in this article, we will differentiate between the two and learn when to use them.
Firstly, both rem and em units are computed into pixel values by the browser, based on font sizes in your design.
Now, when it comes to the difference between rem and em :
rem units are based on the font size of the html tag element, whereas em units are based on the font size of the element they’re used on.
This means that rem units can be influenced by font size inheritance from browser font settings. However, em units can be influenced by font size inheritance from any parent element.
For example:
If the root html
element has font-size: 16px
and there is a div
element has font-size: 18px
then for that div
and for its children 1em = 18px
however 1rem = 16px
You can see the results by changing font-size of the the root html
element.
Use em units for sizing that should scale depending on the font size of an element other than the root.
Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.
Conclusion
I use rem in font sizing and spacing, and I use em for layouts like a navbar.
Thank you for reading !
I hope you found this article helpful and insightful. I would appreciate your applause and sharing :-)
For more articles, check out the links below.