CSS Units: REM or EM!?

Are you struggling trying to understand what the heck is the difference between rem and em in your CSS files? Trying to guess which to use for font-sizes, margin and padding? I was in the same position, and throughout this article, I aim to help you understand each of them, their differences and my rule of thumb to apply them inside any web project.

Before we start, we should be aware of what kind of units are we going deal with, and for that, let's see the following groups of CSS units available:

As you may see, rem and em are relative units, and according to MDN documentation:

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport.

Let's get started!

Theory

em unit is relative to its parent, either the root element or any container; it depends where it's defined.
rem unit is relative only to the root element, no matter whether or not it has a different parent than the root.

The theory is important, however, let's see an example to clarify these meanings with the font-size property.

Hands-on

Note: By default, the browser font size is 16px.

<div class="em-container">
  <p>EM</p>
</div>
<div class="rem-container">
  <p>REM</p>
</div>

.em-container,
.rem-container {
  font-size: 32px;
}

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

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

Even though we have defined to each container a font-size of 32px, we can see different behaviours. em will always behave according to its parent, in this case, em-container, and rem always according to the root. Therefore, our values for each of them are the following:

1em = parent font-size (32px)

1rem = root font-size (16px, by default)

Cascading EM problem in font-size

<div class="em-container-1">
  <p>EM-1</p>
  <div class="em-container-2">
    <p>EM-2</p>
  </div>
</div>

.em-container-1 {
  font-size: 32px;
}

.em-container-2 {
  font-size: 64px;
}

.em-container-1 p,
.em-container-2 p {
  font-size: 1em;
}

Despite both <p> elements have a font-size of 1em, both behave completely different, no matter both have the same font-size. In this case we have the following font-size assigned:

.em-container-1 { font-size: 1em } = parent font-size: 32px

.em-container-2 { font-size: 1em } = parent font-size: 64px

If we are not aware of this cascading effect, we could have a frustrating day trying to understand why the font-size doesn't behave as we want.

My Rule of thumb

Having said that, as a rule of thumb I have decided to use each of these CSS units in the following way:

em units for margin and padding properties

rem units for font-size

I really hope this post had helped you to understand this difference, however, the best way to understand it is playing with the code and check the differences of behaviours.

Please let me know, according to your experience, how do you use these units.

Thanks for reading!