Em and Rem Units in CSS
Em vs. Rem Units in CSS
When sizing elements using CSS properties, you may have noticed two options: absolute units and relative units. Absolute units are identical and fixed, and their size can be set in cm, mm, or px. Relative units, on the other hand, are relative to something else, whether that’s a parent element or another element.
In this tutorial, we’ll take a look at a comparison of the em and rem units in CSS.
Employee Units
The em unit makes it possible to resize an element, with its font size being relative to its parent element. This means that if the parent element’s size changes, the child element will also change.
Let’s look at an example to understand the role of the em unit.
Example
In this example, we’ll change the font size of the child element to 35px. The child element’s margin will also be changed to 50px.
Here, we first created a parent element and then set its size to 17.5px. The child element’s font size is set to 1em, meaning the child element’s font size will be doubled, and the element’s margins will be the same. Let’s take a look at the output we’ll get from this code.
Note – Usage of the font-size property. When used over other properties, font size is relative to the parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Difference between em and rem</title>
<style> .father {
padding: 0px;
font-size: 16px;
}
.son {
margin: 1em;
font-size: 1em;
}
</style>
</head>
<body>
<div class="father">
This is the Father element
<div class="son">
This is the Son element
</div>
</div>
</body>
</html>
In the above output, there is a parent element and a child element. The child element is displayed with the same size as the parent element in the output.
Rem Unit
The rem unit is relative to the font size of the root element, which is the html element. If no font size is specified, the browser default is used; the parent element is not considered; only the root element is considered.
Example
We’ll keep the font size of a child element at 50px and then set the margin of that element to 40px. Sizing in rem units will be relative for all declarations, unlike ems.
In the following example, we start with a root element, then create a parent and child element. We then set the font size of the root element to 18px and the font size of the parent element to 15px. The child element’s font size is then set to 1.5rem, meaning it’s twice the size of the root element, not the parent. Let’s look at the output to see the rem unit in action.
<!DOCTYPE html>
<html lang="en">
<head>
<title>The difference between em and rem units</title>
<style>
html {
font-size: 18px;
}
.son {
font-size: 2rem;
margin: 1.5rem;
}
.father {
font-size: 13px;
}
</style>
</head>
<body>
<div class="father">
This is parent
<div class="son">
This is Child in rem unit system </div>
</body>
</html>
As you can see in the output above, the child element is not an alternate for the parent element, but rather an alternate for the root element.
The em unit is relative to its nearest parent’s font size, which can lead to compounding effects. The rem unit is relative to the HTML root font size, but it does not lead to compounding effects.
Em and Rem Units in CSS
These units include em, vh, vw, and rem. Relative units, also known as scalable units, play an important role in website responsiveness. The em and rem units are both scalable and relative. The em unit is relative to the font size of the parent element in the HTML document, while the rem unit is relative to the font root of the entire document.
Conclusion
The difference between em and rem units is that em units are relative to the parent element, while rem units are relative to the root element. Both units are relative units, which help make websites responsive. These units are useful for setting the size of certain elements.