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
Jochem
Jochem2mo ago
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
snxxwyy
snxxwyy2mo ago
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
Jochem2mo ago
I'm not sure honestly, but you'd have to test that anyway
snxxwyy
snxxwyy2mo ago
No worries, from your use of leaving them do they seem to do the trick for you?
Jochem
Jochem2mo ago
I mean, I don't feel the need to override, so yeah, I guess 🙂
snxxwyy
snxxwyy2mo ago
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
Jochem2mo ago
rem isn't magically responsive
snxxwyy
snxxwyy2mo ago
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
Jochem2mo ago
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 situation
snxxwyy
snxxwyy2mo ago
Ah so rem and em are more for like svgs and stuff?
Jochem
Jochem2mo ago
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
snxxwyy
snxxwyy2mo ago
Oh? What situations would and wouldn’t warrant that?
Jochem
Jochem2mo ago
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
snxxwyy
snxxwyy2mo ago
Yeah that makes sense So setting a width and height in em/rem or px is essentially the same?
Jochem
Jochem2mo ago
for responsive design purposes, yes
Jochem
Jochem2mo ago
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 ...
snxxwyy
snxxwyy2mo ago
In what other purposes would that not be the case? I’ll check that out, thanks
Jochem
Jochem2mo ago
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
snxxwyy
snxxwyy2mo ago
Alright no worries, thank you for your help!
ἔρως
ἔρως2mo ago
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
snxxwyy
snxxwyy2mo ago
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.
ἔρως
ἔρως2mo ago
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
snxxwyy
snxxwyy2mo ago
ah okay, thank you
ἔρως
ἔρως2mo ago
you're welcome
clevermissfox
clevermissfox2mo ago
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
ἔρως
ἔρως2mo ago
oh, yeah, forgot about that
Want results from more Discord servers?
Add your server
More Posts
How to model the data?I'm working on a Chrome extension that lets users get deeper insights into their YouTube watch time intersecting bordersHow can I prevent div borders from being accumlated on top of each other like here https://codepen.iScroll Animation with Dynamic Image change want to be more reactiveHi there, I'm new but I'm needing some help with my scroll animating. For the most part, what I haveGit repo 'rebasing' message in terminal: "Please enter the commit message for your changes"I've been trying to push to a remote repo, and I'm being hit with this message in the terminal (see How to remove whitespace when zoomed near scroll barIm using tailwind, when i zoom near the scrollbar there is small whitespace next to it, how do i remVideo with source webm not looping in safariI'm having a video tag used as background video, which is working great in all browsers – except safUsing React Query with SSR Next js 14 App RouterHello. I would like to know if it is possible to use React Query in Next js 14 App Router in Server Achieving Consistent Blur Effects Across Different Browsers: A GuideCould someone please advise me on why the blur effect doesn't appear consistent across all browsers get Text and link (if exists) when users highlight text on screen.Hi guys, I wonder that how can I get text and the link when users highlight it on screen? I got the Need help with the Tab active stateso i have this 4 sections with the tab on the top of it. what i want to do is i want tomake the tabs