Relative Units. Is there a difference between 'em' and 'rem'?

HTML-CSS
1

is rem and em the exact same thing? The module explains that em is proportional to the text size. Is that it? Please elaborate on this more.

I set the padding of an element within a red box to have 1.5em

2

em - relative to the font-size of the closest parent
rem - or “root em” is relative to the font-size of the root, the <html> tag

Did a quick fiddle so you can switch between the two and check here

1 Like
3

In addition to what @daspinola said, in my experience rem is far easier and more commonly used.

2 Likes
4

rem is ‘root’ em, which means it will look at the root parent - html 's font-size no matter where the child is. p inside a div will look at the root.

em will look at its closest parent’s font-size. p will look at div's font-size.

However, font-size of a child specified with em will look at its parent’s font-size, that is not the case with the child’s margin and padding properties, both of them will look at its own font-size

html {
font-size: 16px;
}


p {
font-size: 2em; // 16*2 = 32px
margin (or padding): 2em; // 2 * (2em) = 4em = 64px
}

All rem will be consistent, because it points to the root’s font-size

3 Likes
5

One of the reasons is probably because em compounds, meaning that if it has more than one parent it will just keep growing the children unless you put 1em on them. As for rem it will always be html size * whatever rem (example 15px of the html * 10rem = 150px is more or less the actual size of your font while using 10rem on a html with 15px font-size).

1 Like
6

Ah I see. so ‘em’ is relative to the closest thing it’s nested in, its ‘parent’ while the rem is relevant to the size you set in <html> Also, In your fiddle, is the 10rem like 10x15px, or 10+15px?

7

You got it yeah.

Like @manno also references it is times (x or *) so a 10rem element for a root font-size of 15px will make your element be around 150px (10x15px)