While choosing a unit for a responsive design, two units that come to our mind are CSS relative units like rem or em. Rem or em provides us the flexibility and adaptability of the sizes based on the viewport.
While developing a responsive website, you have probably been using rem and em quite often without knowing the exact difference between the two. So in this article, we will cover all the use cases and differences between the two. And by the end of this article, you will be able to choose the unit according to your use case.
1. Em Unit in CSS
Em is relative to the current font size of the element and different for each element in the document.
Let’s take an example:
.parent {
font-size: 12px;
}
.child {
font-size: 3em;
}The font size of the child element will be 36px(3*12), i.e. 3 times the font size of the parent element. Also, if the parent element does not specify the font size, the value of other higher elements is considered in the DOM tree. And if no value is specified there, then the default browser size 16px is considered.
i. Using Em on Other Properties
Not just the font-size em is used everywhere the unit is used, i.e. margin, padding, max-width, width, height, and many more. When em is used on other properties than font-size the value will be relative to its own size.
Let’s take an example:
.parent {
font-size: 12px;
}
.child {
font-size: 3em;
margin: 2em 1.5em;
}The margin-top and bottom on the child element will be 72px (2*36), i.e. the 2 times the font size of the element.
The margin-left and right on the child element will be 54px (1.5*36), i.e. 1.5 times the element’s font size.
2. Rem Unit in CSS
Rem stands for root em. This unit is relative to the font size of the root element i.e., <html>. In rem, the parent font-size element has no effect. And if the root element <html> does not have the specified font-size, then default browser size 16px is used.
Let’s take an example:
.html {
font-size: 18px;
}
.parent {
font-size: 12px;
}
.child {
font-size: 3rem;
}The <html> element is the root element of the Html document, so 3 rem is relative to the size defined in <html> element. Therefore the font-size of the child element will be 54px (3*18), i.e. the 3 times the font-size of the root element.
i. Using Rem on Other Properties
Similarly like em, rem is also used everywhere the unit is used, i.e. margin, padding, max-width, max-height, width, height, and many more. When rem is used on other properties than font-size the value will also be relative to the root element.
Let’s take an example:
.html {
font-size: 18px;
}
.parent {
font-size: 12px;
}
.child {
font-size: 3rem;
margin: 2rem 3rem;
}The margin-top and bottom on the child element will be 36px (2*18), i.e. the 2 times the font-size of the root element.
The margin-left and right on the child element will be 54px (3*18), i.e. 3 times the root element’s font-size.
3. Compound Effect
Em is a great unit, but there is one problem: it can compound from one level to another.
Let’s understand this using an example:
.parent {
font-size: 12px;
}
.child {
font-size: 2em;
}
<div class="parent">
Hello, I am 12px
<div class="child">
Hello, I am 24px
<div class="child">
Hello, I am 48px
<div class="child">
Hello, I am 96px
<div class="child">
Hello, I am 192px
</div>
</div>
</div>
</div>
</div>
While rem units avoid the compound effect of em. As in rem elements, sizes are always consistent based on the font-size of the root element.
Let’s understand this using an example:
.parent {
font-size: 12px;
}
.child {
font-size: 2rem;
}
<div class="parent">
Hello, I am 12px
<div class="child">
Hello, I am 24px
<div class="child">
Hello, I am 48px
<div class="child">
Hello, I am 96px
<div class="child">
Hello, I am 192px
</div>
</div>
</div>
</div>
</div>
4. Conclusion
Both the units rem or em are the best and most used ones for the responsive website design. Some people like to design in rem units, while some prefer em over rem for consistency and flexibility. It all depends on your personal choice.
Which unit do you prefer to use on your website? Tell to us by writing in the comment section below.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
