Description
https://drafts.csswg.org/css2/#collapsing-margins
bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height
Note the above rules imply that:
- The bottom margin of an in-flow block box with a height of auto and a min-height of zero collapses with its last in-flow block-level child’s bottom margin if the box has no bottom padding and no bottom border and the child’s bottom margin does not collapse with a top margin that has clearance.
The note mentions a requirement for min-height: 0
, where does this come from? The normative text only mentions min-height
for a different case.
Testcase: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/11745
- Gecko and Blink collapse as long as
min-height
doesn't increase the height. - WebKit collapses regardless of
min-height
.
What about max-height
? https://software.hixie.ch/utilities/js/live-dom-viewer/saved/11746
- Gecko and Blink collapse as long as
max-height
doesn't decrease the height. - WebKit collapses regardless of
max-height
.
Worth noting that there is also this other case:
top and bottom margins of a box that does not establish a new block formatting context and that has zero computed min-height, zero or auto computed height, and no in-flow children
Testcase: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=11751
Collapses | Spec | Gecko | Blink | WebKit |
---|---|---|---|---|
height: 1px; max-height: 0px |
❌ | ❌ | ✔️ | ❌ |
height: 100% (indefinite) |
❌ | ❌ | ✔️ | ✔️ |
min-height: 100% (indefinite) |
❌ | ❌ | ✔️ | ❌ |
Should the spec change to align with some browser? At least remove the spurious min-height: 0
from the note, or enforce it in the normative text.