https://www.w3.org/TR/CSS22/box.html#collapsing-margins
Margins do not collapse on grid items and flex items. I find this confusing and inconsistent. I can’t help but think these were specced this way because so many people have been frustrated by unexpected margin collapsing. Instead, the result is there are more exceptions to the rule, making the entire concept even more difficult to learn.
For example, see this question on Stack Overflow; this person expects the margins of their flex items to collapse. And rightfully so, IMO.
I think it would be great if we had a way to explicitly set (or disallow) margin collapsing for an element, perhaps similar to border collapsing on tables. Proposed syntax examples:
.foo {
margin-collapse: collapse;
}
.bar {
margin-collapse: separate;
}
It might make sense if top and bottom margins could be individually controlled. margin-collapse: collapse separate could be shorthand for margin-top-collapse: collapse; margin-bottom-collapse: separate.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3