DEV Community

loading...
Cover image for CSS Units: REM or EM!?

CSS Units: REM or EM!?

jharteaga profile image Jose Arteaga ・3 min read

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:

CSS Length units group Units
Absolute px, pt, cm, mm, in, Q, pc
Relative em, rem, vw, vh, vmin, vmax, ex, ch, lh
Percentages %

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>
Enter fullscreen mode Exit fullscreen mode
.em-container,
.rem-container {
  font-size: 32px;
}

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

.rem-container p {
  font-size: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.em-container-1 {
  font-size: 32px;
}

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

.em-container-1 p,
.em-container-2 p {
  font-size: 1em;
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (5)

pic
Editor guide
Collapse
jharteaga profile image
Jose Arteaga Author • Edited

Facundo gave an excellent explanation, and that's the reasoning. Before, I used to use a lot the px and rem unit, in almost everything, then I realized that using px and rem are almost the same, the difference with rem is that you scale 16px by 16px (if you don't change the default root font size). So instead of setting a margin with 16px, you put 1rem. The problem is scaling, as Facundo mentioned.

For example, If the font-size decreases from 3rem to 2rem, the margin will remain the same using rem because it's looking to the root font-size which is still 16px. Otherwise, if you use em, the margin will change and adapt, because it's relative to its parent font-size.

Let's do the arithmetic, we are going to assume that we haven't changed the default font-size of the root element, which is 16px. So the following values are for the same container:

font-size: 2.5rem => (16px * 2) + (16px / 2) => 40px
margin: 0.5em => 20px (half of the parent font size, 1em = 40px)

If we change the font-size to 2rem, the margin will change automatically to 16px.

So, this is the advantage of using rem in font-size and em in margin and padding, otherwise, you will finish changing always all your values trying to adapt things when font-size change.

Hope this helps guys!

Collapse
nickyoung profile image
Nick Young

Thank you for this awesome reply. It totally makes sense now that you have laid it out like that. I am going to start doing this. Thank you!

Collapse
facundocorradini profile image
Facundo Corradini

Makes it easier to scale. If you have for instance your buttons with rem font-size and em padding, the padding will adapt automatically whenever the font-size changes.
If you set everything in rem you'll find yourself micro-controlling each and every property, which makes it way harder to maintain.

Collapse
nickyoung profile image
Nick Young • Edited

I am curious about the reasoning for this as well. I just use rems for everything these days.