CSS Units: REM or EM!?
Tags: css, beginners, webdev, codenewbie
Published: 2020-03-19 04:26:19

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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units):

> 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.

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

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

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

.rem-container p {
  font-size: 1rem;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qas22j2iu0r5q49yie1r.PNG)

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**

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

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

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

.em-container-1 p,
.em-container-2 p {
  font-size: 1em;
}
```
<img src="https://dev-to-uploads.s3.amazonaws.com/i/sl8wxmf2ckbfduy8iyoe.PNG" style="border: 2px solid black"/>

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!