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.

Jochem•4/23/24, 11:41 AM

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

JJochem personal preference mostly. I like to leave them alone as much as possible, beca...

snxxwyyOP•4/23/24, 2:29 PM

Ah got it. Would the fact they’re set in px affect responsiveness regarding users zooming in and changing their default font size though?

Jochem•4/23/24, 2:30 PM

I'm not sure honestly, but you'd have to test that anyway

JJochem I'm not sure honestly, but you'd have to test that anyway

snxxwyyOP•4/23/24, 2:36 PM

No worries, from your use of leaving them do they seem to do the trick for you?

Jochem•4/23/24, 2:37 PM

I mean, I don't feel the need to override, so yeah, I guess

JJochem I mean, I don't feel the need to override, so yeah, I guess 🙂

snxxwyyOP•4/23/24, 2:42 PM

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?

Jochem•4/23/24, 2:42 PM

rem isn't magically responsive

snxxwyyOP•4/23/24, 2:44 PM

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?

Jochem•4/23/24, 2:44 PM

it's a bit of a non-concern honestly. The margins and paddings are small, it's fine to define them with px. and are for when you want some element of the design to scale with the font size.

Ssnxxwyy I understand, but it would accommodate the users preferences and scale the size ...

Jochem•4/23/24, 2:44 PM

eh, depends on the situation

JJochem it's a bit of a non-concern honestly. The margins and paddings are small, it's f...

snxxwyyOP•4/23/24, 2:45 PM

Ah so rem and em are more for like svgs and stuff?

Jochem•4/23/24, 2:45 PM

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

JJochem eh, depends on the situation

snxxwyyOP•4/23/24, 2:45 PM

Oh? What situations would and wouldn’t warrant that?

Jochem•4/23/24, 2:46 PM

if you set a height and width in rem, it will still not be responsive

Ssnxxwyy Oh? What situations would and wouldn’t warrant that?

Jochem•4/23/24, 2:46 PM

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

snxxwyyOP•4/23/24, 2:47 PM

Yeah that makes sense

JJochem if you set a height and width in rem, it will still not be responsive

snxxwyyOP•4/23/24, 2:48 PM

So setting a width and height in em/rem or px is essentially the same?

Jochem•4/23/24, 2:48 PM

for responsive design purposes, yes

Jochem•4/23/24, 2:49 PM

https://www.youtube.com/watch?v=N5wpD9Ov_To

YouTubeKevin Powell

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 ...

JJochem for responsive design purposes, yes

snxxwyyOP•4/23/24, 2:49 PM

In what other purposes would that not be the case?

JJochem https://www.youtube.com/watch?v=N5wpD9Ov_To

snxxwyyOP•4/23/24, 2:49 PM

I’ll check that out, thanks

Ssnxxwyy In what other purposes would that not be the case?

Jochem•4/23/24, 2:51 PM

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.

Jochem•4/23/24, 2:51 PM

anyway, I gotta run, so maybe someone else can answer any followups you have

snxxwyyOP•4/23/24, 2:52 PM

Alright no worries, thank you for your help!

Ἔ

ἔρως•4/23/24, 4:13 PM

personally, i like using rems nearly everywhere for one simple reason: scaling

Ἔ

ἔρως•4/23/24, 4:14 PM

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

Ἔ

ἔρως•4/23/24, 4:15 PM

so, if everything grows a little, i assume it is helpful

Ἔ

ἔρως•4/23/24, 4:15 PM

this may or may not be what you want for your site, but it is something i wanted for the ones ive made

Ἔἔρως personally, i like using rems nearly everywhere for one simple reason: scaling

snxxwyyOP•4/23/24, 5:14 PM

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.

Ἔ

ἔρως•4/23/24, 5:16 PM

the default margins onthe document won't do that

Ἔ

ἔρως•4/23/24, 5:16 PM

don't worry

Ἔ

ἔρως•4/23/24, 5:16 PM

also, i highly doubt that anyone increases the text size to the point where it causes very serious issues

snxxwyyOP•4/23/24, 6:03 PM

ah okay, thank you

Ἔ

ἔρως•4/23/24, 6:06 PM

you're welcome

curiousmissfox•4/24/24, 8:45 PM

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

Ἔ

ἔρως•4/24/24, 9:23 PM

oh, yeah, forgot about that