Let's discuss the relative unit 'em'
I can't wrap my head around the concept of 'em'. Actually, the hole concept of spacing using units relative to the font-size is difficult for me.
Let's take a default example: responsive padding of a button.
Setting the padding of this button to use 'em' will make it relative to the font-size of the closer parent element, right?
Well, what I don't understand is, what if this parent element is a 'div', or some other elements which we do not set font-sizes?
By default, shouldn't they have the root font-size '16px'? If so, what makes it different from using the unit 'rem'? Or should i set a font-size to these elements as well?
articles, kevin’s videos and others sources to help me understand this concept is more than welcome
7 Replies
if you dont set a font size, its the equivalent to it having
font-size: 100%
if you dont set a font size anywhere, then the spec says that the default font size is medium, which is 16px by default
if you use em, its the same as using percent
1em = 100%
the gotcha of using em is that it compounds
imagine you have a div with 1.5em, and a child with 1.2em
that child with be 1.5x1.2 the size of the parent - or something like that
if the font size started at 16px, the child will be at 16x1.5x1.2 = 28.8px
and it also goes the other way: if you do 0.85em on the div and then 0.7em on the child, because you want the child to be smaller, you end up with 16x0.85x0.7 = 9.52px
this is why people prefer to use rem for font sizes: it will always use the font size of the root element
for example, if you have a div with 1.5rem and a child with 1.2rem, then you get 16x1.2 = 19.2px
and if you use the other example and the child afterall has 0.7rem, then the font size is 16x0.7 = 11.2pxgot that
one thing that always confuses me it's ppl saying that 'em' and 'rem' are responsive. Well, if it's responsive so i don't need to worry about responsiveness on those elements right? like, if i set width and heigth using 'em' 'rem'
but then i realized, they are not completely responsive, they are specific responsive to the font size. So they responsiveness will only work if the user changes the browser font size. This means i still need to work with media queries on those elements, right?
pls correct me if i'm wrong
pls correct me if i'm wrong
they're not responsive at all, they're fixed units
the only thing they "respond" to is the font size, but that's not what's meant when people speak of responsive design
got it
designing for the font size it’s a difficult concept that i need to study more
its a lot easier than you think
just remember this: em and rem is all based on font sizes
em is the parent, rem is the root element
for most cases, rem gets the size from the <html> or <svg> element
but as jochem said, its always a fixed size
also, i wouldnt size elements based on rems, unless you have a good reason for it
either use a grid and size with pixels, percent, auto or fr
or use pixels or percent
but this all depends on the situation
what people also do is to use clamp with rem and vw
thank you
you're welcome