em vs rem - Most confusing CSS units explained

em and rem are two of the most commonly used CSS relative units. They are also one of the most common sources of confusion among beginners. In this article, we'll see what exactly they are and how to use them.

Relative Units

Relative units derive their sizes from other properties. Unlike absolute units(like pixels, inches etc.) whose sizes are independent of other units, the sizes of relative units change according to that of other properties.

In particular, em and rem are relative to the font sizes of parent and root elements respectively. Let's understand with this an example.

em vs rem

First, we'll define two containers, one each for em and rem respectively.

<div class="em-parent">
  <p>em-size</p>
</div>

<div class="rem-parent">
  <p>rem-size</p>
</div>

Now, let us set the font-sizes for the root element and the children of em-parent and rem-parent containers.

:root {
  font-size: 32px;
}

.em-parent p {
  font-size: 1em;
}

.rem-parent p {
  font-size: 1rem;
}

As we can see from the result below, both the child elements derive their sizes from root element (1em = 1rem = 32px).

Now let's see what happens to the font-sizes of the child elements when we set the font-sizes of their parent containers.

:root {
  font-size: 32px;
}

.em-parent {
  font-size: 64px;
}

.em-parent p {
  font-size: 1em;
}

.rem-parent {
  font-size: 64px;
}

.rem-parent p {
  font-size: 1rem;
}

As we can see from the result, the em unit is deriving its size from its parent container, whereas the rem unit remains fixed to the font-size of the root element, unaffected by the font-size of its parent container. So in this case, 1em becomes 64px and 1rem remains 32px;

So remember, em derives its size from its parent, and in the absence of the parent's font-size, it derives its size from the root element. Whereas rem always remains fixed to the font-size of the root element.

Now that we understand the basic difference between em and rem, let's get into their application.

How to use em and rem
em and rem are most commonly used to set font-size, padding and margin of the elements. But another difference between em and rem is that, em has a compounding effect on padding and margin, whereas rem always remains constant. That may sound confusing. So, let's understand it with an example.

We'll use two buttons to demonstrate this example.

<div class="button-1">
  <button>button 1</button>
</div>

<div class="button-2">
  <button>button 2</button>
</div>

Now let's set the properties of both the buttons in em.

:root {
  font-size: 16px;
}

.button-1 {
  font-size: 16px;
}

.button-1 button {
  font-size: 1em;
  padding: 1em;
  margin: 1em;
}

.button-2 {
  font-size: 16px;
}

.button-2 button {
  font-size: 1em;
  padding: 1em;
  margin: 1em;
}

Let's increase the font-size of button 1 to 2em(2 * 16 = 32px) and see what happens.

.button-1 button {
  font-size: 2em;
  padding: 1em;
  margin: 1em;
}

Apart from increase in its font-size, something interesting has just happened in button 1. Can you notice it? No? It might be a bit difficult to notice with naked eye. So, let me show what happened.

Notice that the padding and margin of button 1 have also increased to 32px(2em) even though they are set to 1em. This is because of the compounding effect of em. While the em of child derives its size from its parent, the em of padding and margin of the child are derived from its own font-size.

So in this example,
1em of child element = font-size of parent container = 16px;
1em of padding/margin = font-size of the element = 2em = 32px;

Now, let's also increase the font-size of button 2 to 2em and set the padding and margin to 1rem each. This will help us visually understand the difference between em and rem better.

The padding and margin in button 2 have remained 16px each. Ideally, we would always want the padding of an element to remain proportionate to its font-size. Notice in the above example, the button 2 looks congested when we increase its font size, but keep its padding fixed to 1rem.

So, it is a good practice to always set the padding of elements in em like we did in button 1.

And as we increase or decrease the font-sizes of the elements, we would want the spacing between them to remain constant. That is why it is a good practice to set the margin in rem. Let's make the change in our code and see the difference.

.button-1 button {
  font-size: 2em;
  padding: 1em;
  margin: 1rem;
}

.button-2 button {
  font-size: 2em;
  padding: 1em;
  margin: 1rem;
}

Notice that if we set the margin in em, the elements drift apart when we increase their font-sizes, owing to the compounding effect of em. But if we set the margin in rem, the spacing between the elements remains constant.

Conclusion:
Many developers often use em and rem interchangeably to set padding and margin. But this can lead to unintended consequences, namely resulting in uneven spacing issues within the elements and in the layout of the website. That is why it's important to understand in what ways em and rem differ.

Let me know in the comments if this article has helped you understand the difference between em and rem better.