default browser margins
Hey, is it recommended to utilise the margin that is on elements such as headings and paragraphs by default? I ask this because regarding resets, I see some use the wildcard selector to remove margin/padding from every element, and others not touch the margins at all. I’m a bit confused on the reasoning behind this so id appreciate any insight, thanks in advance.
26 Replies
personal preference mostly. I like to leave them alone as much as possible, because they're well considered and half the time you're adding them back in further down the line anyway
Ah got it. Would the fact they’re set in px affect responsiveness regarding users zooming in and changing their default font size though?
I'm not sure honestly, but you'd have to test that anyway
No worries, from your use of leaving them do they seem to do the trick for you?
I mean, I don't feel the need to override, so yeah, I guess 🙂
Alright cool, thank you for your input. And I guess if it ends up interfering with the responsiveness you could always re-define the default values in rem in your reset right?
rem isn't magically responsive
I understand, but it would accommodate the users preferences and scale the size of the margin up and down if they change their default browser font size right?
it's a bit of a non-concern honestly. The margins and paddings are small, it's fine to define them with px.
rem and em are for when you want some element of the design to scale with the font size.
eh, depends on the situationAh so rem and em are more for like svgs and stuff?
rem and em are just not magic. I see a lot of people use rem and responsive in the same breath, and they're just not super related concepts
Oh? What situations would and wouldn’t warrant that?
if you set a height and width in rem, it will still not be responsive
depends on if the padding really needs to grow or shrink along with the user's font size. Again, you need to test because there are no hard and fast rules
Yeah that makes sense
So setting a width and height in em/rem or px is essentially the same?
for responsive design purposes, yes
Kevin Powell
YouTube
Are you using the right CSS units?
There are a lot of different units that we can use when writing CSS, in this video I give some general rules of thumb of which ones are best suited for which situations.
Zell's article on media queries: https://zellwk.com/blog/media-query-units/
Em vs. Rem: https://youtu.be/_-aDOAMmDHI
Using clamp() for fonts: https://youtu.be/U9VF-4euyRo
The ...
In what other purposes would that not be the case?
I’ll check that out, thanks
all rem and em do is change the size so that it's dependent on the local or root font size. That's literally it. The one place you must use rem or em is when you're setting a font size, but other than that it shouldn't necessarily be the unit you go for if there's others that make more sense.
anyway, I gotta run, so maybe someone else can answer any followups you have
Alright no worries, thank you for your help!
personally, i like using rems nearly everywhere for one simple reason: scaling
this is probably a bad idea from an ux/ui design, but if someone has a bigger font size, i presume that it is someone that also has other issues - like issues finding where stuff is or issues reading long content
so, if everything grows a little, i assume it is helpful
this may or may not be what you want for your site, but it is something i wanted for the ones ive made
that's what i was thinking when i queried it being set in px. The text would grow and since the space isn't growing everything would look clumped together eventually.
the default margins onthe document won't do that
don't worry
also, i highly doubt that anyone increases the text size to the point where it causes very serious issues
ah okay, thank you
you're welcome
Also if using grid or flex the margins no longer collapse so it looks like the default margin will double. I use flex/grid a lot so I do end up zeroing them since they’ll need to be adjusted anyway if collapsing margins are no longer merging
oh, yeah, forgot about that