CSS Units - REM or EM
Tags: css, scss
Published: 2021-02-21 16:48:41

---
title: CSS Units - REM or EM
published: true
date: 2021-02-15 00:00:00 UTC
tags: css, scss
canonical_url: https://www.mariokandut.com/css-units-rem-or-em/
---

 **Relative Units** are used for **styling responsive sites** , because they scale relative to the parent element or to the window size (depending on the unit). When using relative units for styling, you avoid having to update all styles for different screen sizes.

[💰: Start your cloud journey with $100 in free credits with DigitalOcean!](https://m.do.co/c/29f238135b61)

There are more relative units than REM and EM, like `%`, `ch`, `vh`, `vw`, `vmin`, `vmax` or `ex`. |

There is a controversial discussion going on about the use of **EM vs. REM** on the web development community, because it’s not always clear which of these options is best to use.

If you want to read more about CSS Units check out this article [CSS Units explained](https://www.mariokandut.com/absolute-and-relative-units-in-css/).

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#em)EM

em has it`s origin in the typography world and allows setting the font-size of an element relative to the font-size of its parent. Let's have a look at an example:

```
.parent {
  font-size: 24px;
}
.child {
  font-size: 0.5em;
}
```

The font-size in the parent is 24px, in the child the font-size would be 12px, because **24px x 0.5em = 12px**. If the parent element doesn't have a specified font-size, it goes higher up the DOM tree. If no font-size is specified, it will get the browsers default font-size of 16px. **EM** units are not limited to font-size, you can use them on padding, margin, width, height, and many more properties.

Let's update the example from above with a margin.

```
.parent {
  font-size: 24px;
}
.child {
  font-size: 0.5em;
  margin-top: 1em;
  padding: 0.5em 0;
}
```

We have calculated the font-size of the child, it's 12px. So the margin-top should be 24px? No, the font-size logic doesn't apply on other properties. When an em unit are **used on other properties than font-size** , it is **relative to the font-size of the element itself**. When used on font-size, the size is relative to the font-size of the parent.

For our example this would mean the following:

```
.parent {
  font-size: 24px;
}
.child {
  font-size: 12px;
  margin-top: 12px;
  padding: 6px 0;
}
```

There is one thing, which really can cause pain when using em in your project, the **Compounding Effect**.

When multiple em-font-sized elements are within one another, the relative to font-size can be compounding. Let's look at the basic css example:

```
.parent {
  font-size: 24px;
}
.child {
  font-size: 0.5em;
}

<div class="parent">
  24px
  <div class="child">
    12px (expected)
    <div class="child">
      I'm 6px (0.5rem of parent)
      <div class="child">
        I'm 3px (0.5rem of parent)
      </div>
    </div>
  </div>
</div>
```

As you can see above the relative to parent logic of em can cause some issues. For that reason `rem` was created.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#rem)REM

REM stands for `root em` and `rem` is only relative to the html (root) font-size, which is the element. If there is not root html specified, the **browser default of 16px** is used. Hence, this means, that the value of the parent element is ignored, and only the value of the root is taken into consideration.

Let's have a look with the above example, but with `rem`:

```
.html {
  font-size: 18px;
}
.parent {
  font-size: 24px;
}
.child {
  font-size: 1rem;
}

<div class="parent">
  24px
  <div class="child">
    18px (as expected, html root is 18px)
    <div class="child">
      18px (as expected, html root is 18px)
      <div class="child">
        18px (as expected, html root is 18px)
      </div>
    </div>
  </div>
</div>
```

Using **REM** units allows to avoid the compounding effect of em units. With REM units we have a consistent styling based on the root element, no surprises. When using REM on other values like margin, padding, size, etc. it will still be relative to the font-size of the root element. I personally prefer REM units. 😉

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

- Use relative units, when your project requires responsiveness.
- EM units are relative to the parent or to itself.
- REM units are relative to the html root element.
- Use REM to avoid the compound effect

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

If you want to know more about **[CSS](https://www.mariokandut.com/tags/css)**, have a look at these [Gatsby Tutorials](https://www.mariokandut.com/tags/css).

References (and Big thanks):[W3C](https://www.w3.org/Style/Examples/007/units.en.html),[Jess Mitchell](https://www.digitalocean.com/community/tutorials/css-css-units-explained),[thenewcode](http://thenewcode.com/1137/MinMaxing-Understanding-vMin-and-vMax-in-CSS),[alligator.io](https://www.digitalocean.com/community/tutorials/css-rem-vs-em-units)