[CSS2] Clarify margin collapsing behavior #11306
Description
The CSS 2 specification, Section 8.3.1 states:
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
-
The statement above seems to describe two scenarios: a) The top margin of an element adjoins the bottom margin of the preceding sibling, and the bottom margin of the same element adjoins the top margin of the succeeding sibling. b) The top margin of an element adjoins the top margin of its containing element, and the bottom margin of the same element adjoins the bottom margin of its containing element.
However, the precise conditions under which margins external to the element collapse through it are unclear.
A possible condition might be:
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
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
.divs {
background: lightgray;
width: 600px;
height: 60px;
}
.collapsed {
background: lightpink;
width: 600px;
height:0;
margin-top: 60px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="divs" style="margin-bottom: 120px;"></div>
<div class="collapsed"></div>
<div class="divs" style="margin-top: 10px;"></div>
</body>
</html>Here, the first and third <div> elements collapse over the second <div>. Clarification is needed to confirm whether this behavior aligns with the specification's intent.
-
The statement:
In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
This is unclear. What specific relationships affect the positioning of the element? Need specific example.
-
Bullets 1 and 2:
- If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
- Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
This seems to address case (b) where a child’s top and bottom margins collapse with the parent’s margins. However, it is unclear what practical behavior this rule defines or why this alignment is significant.
-
The statement:
Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
This suggests that elements being collapsed through may still have descendants. However, this seems contradictory, as the content area of an element with children appear to prevent margins from "collapsing through it". Further clarification is needed to define which "elements" are being referenced here and what exact behavior is being specified regarding their top border edge?