The basics
-
rem
rem units are relational to the font-size value of the HTML tag. For example, if the font size of the HTML tag is 16px (that is the default size for an html document), then 1rem unit is equal to 16px. That makes .5rem=8px, 2rem=32px, etc.
-
em
em units are similar to rem units, but whereas a rem unit always references the HTML tag, an em unit is relational only to it’s nearest defined parent element. For example, if the div wrapper for a call out is set to font-size:20px, then any child element set to 1em would be the equivalent of 20px, .5em=10px, 2em=40px, etc.
Sagar Pansuriya 