Consider removing top margins from headlines and paragraphs

[jensimmons]

Consider removing top margins from headlines and paragraphs

[fantasai]

That note is about the top and bottom margins of a single box, not about margin collapsing in general! I love that CSS has margin collapsing, for exactly the reason @scottkellum describes. But the rules that allow a given element's own top and bottom margin to collapse, essentially through the element itself, are super weird and create a lot of confusion and complexity.

[scottkellum]

While I understand the annoyance of margin collapsing I have shifted my thinking on them. Margins are a way of saying the thing above/below me should be no less than this far away. This is super useful if you have a heading and paragraph where the heading requires more space. The heading space takes precedence and the paragraph margin collapses resulting in a clean and predictable space below that heading. If padding were used and the values were different between multiple smaller elements, then the space below the heading would be inconsistent.

That said, well managed padding and removed margins can be implemented well and I understand the appeal of that control.

[jensimmons]

I'm leaning towards not doing this — not removing top margins on everything to effectively get rid of margin collapsing. It seems like too drastic of a "recommendation" to be making for every website to do. Too far from the CSSWG's decisions.

[jensimmons]

This issue has been open for a while now, without much new debate. I'm going to close it as fixed. Let's not remove the top margins of anything. (Let's deviate from Bootstrap.) It's too opinionated.

[stevenadams]

I know this is closed but I thought I'd weigh in with something that we noticed in a GovUK project - that margin collapsing didn't happen on Firefox but did on Chrome. So you got different layouts in two modern browsers. I also like only margin bottom as there is one direction for spacing.

[frivoal]

@stevenadams, As far as I know, the csswg believes margin collapsing to be precisely defined and interoperably implemented nowadays. If you've found a case where browsers differ, I encourage you to report it at https://github.com/w3c/csswg-drafts/issues