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!

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.

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;
}

24px

12px (expected)

  I'm 6px (0.5rem of parent)

    I'm 3px (0.5rem of parent)

`

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

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;
}

24px

18px (as expected, html root is 18px)

  18px (as expected, html root is 18px)

    18px (as expected, html root is 18px)

`

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

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.

If you want to know more about CSS, have a look at these Gatsby Tutorials.

References (and Big thanks):W3C,Jess Mitchell,thenewcode,alligator.io