Consider removing top margins from headlines and paragraphs
Closed this issue · 6 comments
One of the items listed on the CSSWG List of Mistakes in the Design of CSS, is this:
The top and bottom margins of a box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
I'm not sure that there's consensus within the CSSWG about this (and it doesn't matter, since we don't have a timemachine), but clearly at least some folks wish margin collapsing wasn't created.
In that vein, the CSS Reboot in Bootstrap removes all top margins from headlines and paragraphs.
https://getbootstrap.com/docs/4.0/content/reboot/#headings-and-paragraphs
All heading elements—e.g.,
<h1>—and<p>are reset to have their margin-top removed. Headings havemargin-bottom: .5remadded and paragraphsmargin-bottom: 1remfor easy spacing.
This is one way to effectively remove much of the annoyance or unexpectedness of margin collapsing.
I don't know that this is a good idea, but I thought I'd open an issue were we can discuss.
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.
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.
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.
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.
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.
@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