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: 16pxand 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.
