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
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
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
In addition to what @daspinola said, in my experience rem is far easier and more commonly used.
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
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).
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?
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)