Question
What is the difference between em and rem values?
Answer
Both em and rem are calculated based on font-size. The key difference between the two is how local the font-size is. The pixel value of 1em is calculated based on the font-size of that element’s parent. In contrast, the pixel value of 1rem is based on the font-size of the root element, which is the html element.
Here is an example -
HTML
<div>
<p>here is some text</p>
</div>
CSS
html {
font-size: 16px;
}
div {
font-size: 12px;
}
In the above code, with p set to 1em, it’s font-size would be 12px, based on the div parent element. Set to 1rem, you would get 16px, based on the root.