Understanding the Difference: "Rem" vs "Em" Units in CSS

Prerequisites

Basic knowledge of HTML and CSS.

Introduction

There are many units of measurement in CSS stylings such as px, cm, rem, em, vh, vw, and many more, some of which are relative values of measurements and some others which are absolute values of measurement. In this article, we would be focusing only on the "em" and "rem" units of measurement.

em is a CSS unit used in styling which is relative to the parent element while rem is a CSS unit used in styling which is relative to the root element. When setting the size of elements during styling, we can give them absolute or relative values. Absolute values are fixed values (i.e they can't change as the screen size reduces or increases) such as px, cm, and so on while relative values are values that are not fixed and change relative to their parent element or root element.

em and rem above are examples of relative values of styling but as discussed earlier, the em unit relates to the parent element while the rem (also known as root em) unit relates to the root element.

1) em units

This unit is relative to the parent element. The font-size changes as the font-size of its parent element changes.

NOTE: em unit when used on the font-size property is relative to the font-size of the parent element but when it is used on other properties like margin, padding or border, it is relative to the font-size of the element itself.

See the code example below for more understanding:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em units</title>
</head>
<body>

    <div class="parent">
        <div class="child">Hi</div>
    </div>

</body>
</html>

In the code example above, we created a div as the parent element and put another div in it as the child element. Now let's style them.

.parent{
    width: 400px;
    height: 400px;
    border: 1px solid red;
    font-size: 30px;
}

.child{
    width: 40px;
    height: 50px;
    border: 1px solid green;
    font-size: 2em;
    margin: 1.5em;
    padding: 1.5em;
}

As we can see, the font-size of the parent element is 30px and the font-size of the child element is 2em, which means that the font-size of the child element would be (2 * 30px) = 60px because as we said earlier, it relates to the font-size of the parent element. Assuming font-size of the child element was 1.2em, it would be (1.2 * 30px) = 36px.

However, there is a totally different approach to calculating the margin, padding etc. The margin in this case would be (1.5 * 60px) = 90px, if you recall, we discussed earlier that for margin, padding or border, the em units relate to the font-size of the element itself and not the parent element and this element currently has a font size of 60px which is why we multiplied the margin by 60px.

2)rem units

This unit is relative to the root element also known as the html element. In this type, there is o relation to the parent element or the child element itself.

The rem value is based on the font-size of the html or element. In a case where the font-size of the html element is not specified, the default browser value of 16px is used.

NOTE: in rem, all the properties are totally relative to the font-size of the html element and has no relation with the font-size of the parent element or the element itself.

Now, let's jump into code examples:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em units</title>
</head>
<body>

    <div class="parent">
        <div class="child">Hi</div>
    </div>

</body>
</html>

For the styling:

html{
    font-size: 10px;
}

.parent{
    width: 400px;
    height: 400px;
    border: 1px solid red;
    font-size: 30px;
}

.child{
    width: 40px;
    height: 50px;
    border: 1px solid green;
    font-size: 2rem;
    margin: 1.5rem;
    padding: 1.5rem;
}

Here, the html element has a font-size of 10px while the font-size of the child element is 2rem, therefore, the font-size of the child element would be (2* 10px) = 20px and the margin also would be(1.5 * 10px) + 15px.

Differences between the "em" and "rem" units

em	rem
It is relative to the font size of its parent element	It is relative to the font size of the root element
It has a compounding effect	It doesn't have a compounding effect

Now, what do I mean by compounding effect? recall, if we want to set a margin value using "em" units, the margin property sets its value according to the font-size of the element itself, but the element is also in turn getting its value from the font-size of its parent element thereby creating a compounding effect.

However, this is not the case in "rem" units as all properties are set according to the font-size of the root element.

Conclusion

The em and rem units are sometimes mixed up for their meanings when coding but I hope this article helps you to differentiate between them when using them as they are sometimes better to use than the "px" values you would normally use.

Let me know what you think about this article in the comment section.

Aziken's Operandi