Can't seem to understand the CSS em unit and the why should I use it for padding and margin
Basically what the title says, yes, I've watched Kevin's video about it, yes, I've watched the
webdevsimplified video on it; but still I can not understand this. Also why should I use it over percentages ? Please explain it to me using simple examples, do not overcomplicate things18 Replies
1em is equal to 1x the size of the font for the current element
if the font size is 22px, then 1em is 22px
why should you use it over percentages? because it's a completely different unit
for example, margin left of 100% will be 100% of the width of the parent element
that means that if the parent is 560px wide, then 100% margin left is 560px
imagine trying to get ANY consistency if you size everything with percentages
but sizing everything with em is bad too
now, why use ems? because the larger the text, the larger the space you need to separate it (up to a certain point) and it is something somewhat consistent
I don't want to hijack this thread, but I have the same question too. I never use it over
rem. I was wondering if anyone could throw in some practical examples of why you'd want to use em over rem?kevin did a video a while ago
one example is with separating text in articles
if you use the
article > * + * selector, you can apply a margin-top: 1em, which will increase the separation of the text based on the size of the font
for example, an h1 or h2 will need to be much more separated vertically than a <p>
and the easiest way is to use 1em
another case where this can help a lot is with the most horrible thing you can imagine: styling a <select>
you can make the arrow be 1em of width, positioned at 0.5em from the right, and give it a padding of 2em to force the text to truncate before the arrow and keep text consistentoh that's neat i'll have to try that
See that makes sense but I'd much rather have control over how much spacing is there manually
you have to wrap it in a div, by the way
you do: it's the font-size
you can use 0.8em instead of 1, if you think it is too much space
you can even clamp it, if it comes to that
or use a min, or something
Yea idk I guess I don't get it then. I use clamp for all my font-sizes and then just use
rem for margin / padding whatever
is em more useful in the context of components where there could be different font sizes?that's fine, but for an article, you will lose your mind trying to do it manually for each element
by "article", in talking about a blog post
that's how i do it already and it's not that big of a deal for me but maybe im just used to it lol
the problem is that if you add something that you didn't had before, then the spacing will go out of whack
all the h1s / h2s / h3s font sizes and margin-bottoms are set in my
typography sass partial
that way every heading is consistent in spacing and font size across the site
when there is something underneath the headings thats something other than text where it'll need some different spacing i just end up changing the styling of the component and overriding the default margin-bottom or whatever of the headingthat's fine, but i see the value in just setting
1em for everything in the blog post and be done with it
and it will look pretty good
try ityea i need to, i jsut still dont see the value in it unless you're controlling things based off the font size in like a component setting (eg if you give a component a class size of large then it sets the component's base font size to 3rem and all the spacings and subsequent font sizes are scaled via em). but ive still never had a case for that since i do it manually
ill see if i can use it for my next projects tho, thx epic
you're welcome
I can’t live without it personally. I rely on clamp so I’m not changing font sizes in media queries.
So at large screens say my base text size is 20 px and it scales down for small screens and at its smallest it’s 16px.
If I have a button and I set it’s padding in rems (16px), when the button has text of 20px I might set it to 0.75rem 1.5rem; but then when my button is on mobile and it’s text is 16px , the padding doesn’t look right anymore. I would have to manually change it to something like 0.5rem 1.25rem.
If instead I set the padding in EMs, the padding will scale with the text size and will always be the right ratio.
Clamp and ems are a must for me for responsive styling. Saves so much time and work; imagine having to manually reset margin/padding/gap on every element on your page. Inefficient and a nightmare.
That makes a lot of sense. I typically always use clamp on my spacing (as well as fs) so if I just kept the clamp on fs then I wouldn't need the extra clamp on my spacing 🤔🤔
Dunno why that helped it click for me, ty!
this is a good use case as well
I’m so glad, I’m pretty terrible at explaining things and tend to over complicate; very glad to be able to help illuminate the benefit of using ems and clamp!! It’s so satisfying when everything scales uniformly!
Oh, I see now! Thanks everybody!