Hacker News Reader

Comment by wwweston | Hacker News Reader

> body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

Why?

I mean, I kinda get this on `body`. But I've never understood why people do this on block level elements like paragraphs and headers where default behavior should definitely be margins.

Closest I've ever come to a rationale is so that you'll see the unset margins and intentionally specify them into whatever design systems you're using. But even that doesn't really make sense: if you've got an off-the-shelf design system, it will do that job, you don't need your reset to do it. If you've got the time/inclination to DIY, you are almost certainly the kind of person who will pay attention to this. And if you're neither of those, your reset should do something sane by default.

Resets should be about standardizing sane cross-browser defaults for quasi-naked HTML. This kind of behavior goes beyond that into nuking sane behavior for naked HTML. Why?

View on HN

There are two schools of thought for CSS resets. 1. Minimize differences between browsers, keep some things like default padding, and styling where it makes sense 2. Nuke everything, standarize box-sizing, etc.. And I lied, there are also some that are more in between, but that's the jist.

The main argument for #1 is that it's closer to vanilla and lighter weight.

The main argument for #2 is that of you're making a comprehensive style, it's nicer to not have to worry about how for input elements have wierd legacy behavior, or to have to have a list of non standard box-sizing elements and a bunch of other weird legacy style anachronisms open all the time.

I personally, and I've seen this happen to others started out in camp #1 and eventually transitioned to camp #2 after I realized just how weird some stuff is. It definitely didn't mame sense to me until I had a lot of CSS experience.

Yup. In my experience, the main argument for #2 is that it's just too hard to remember/bother with what some default margin or padding is in the first place.

If it's nonzero, it's always going to be something extremely arbitrary, and will almost never be the value that matches your design anyways.

Best to just nuke it all and make every positioning decision consciously. And when you forget to set something, it'll be quite obvious where it needs to be fixed.

I guess I'm definitely a #1 person, because I don't understand how #2 relates. By all means, standardize all the things to remove variation -- that resonates pretty strongly with me. But I don't get how "standardize" shifts to "zero-out."

When you standardize on any other number you have to remember it and account for it.

For instance if you settle for 2em margins, all you other margin calculations need to remember that 2em value, and you also need to teach all your new coworkers the 2em value. That's dramatically less needed if it's 0.

Remembering / managing multiple margin values is a conversation that I can definitely relate to having about a design system or custom CSS.

For a reset/normalization sheet focused on sane standardized defaults? Seems like we'd be talking about two numbers: whatever vertical margin you want for your block level elements that you'd expect to have margins (most likely 1em) and 0.

Where are the other numbers coming from in the context of a reset?

There's other stuff besides numbers, like box-sizing and display that you uave to remember if you don't reset them.

> I've never understood why people do this on block level elements like paragraphs and headers where default behavior should definitely be margins.

IMO it’s more correct semantically. An <h1> means the top level of page heading, it doesn’t mean “1em of margin at the top and bottom”. A CSS reset that also resets all margins etc lets you derive your own formatting rules from semantic HTML. In most cases this is all a nitpick but I do get the rationale.

To play the devil's advocate: so that you notice that something is amiss and you fix it. The problem with margins on these elements (at least, this used to be true - not sure if this is fixed nowadays) is that every browser implements its own defaults. Some of them might be suitable, but that will only mean that if the designer doesn't set them, these settings will be off in other browsers. So someone who cares might just as well set everything to 0 and then set as needed. Also, less likely that some margin will be set where 0 is appropriate.

On the other hand not much is lost with this. If css is ignored, cool. If not, other settings will fix layout as needed.

It's to avoid vertical margin collapsing. The rules for margin collapsing are complex, counter-intuitive, and often considered misconceived. (https://wiki.csswg.org/ideas/mistakes)

It's typically easier to work out a layout if you use padding in preference so you don't have to worry about them, but first you have to reset the margins the browser gives you.

I'd agree vertical margin collapse rules have some counterintuitive cases. And I've definitely seen (and used) something like:

h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; }

which fits with the expectation that headers don't need to kick off with a vertical margin along with overflow containment rules to manage that behavior.

I don't know if I've seen using padding values to do margin's job lead to less pain.

Reply on news.ycombinator.com