Menu
Section 8.3.1 of the CSS 2.1 spec on collapsing margins states:
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
Here is my, surely erratic, attempt at making something out of this statement:
The statement considers an element X for which:
X has clearance, therefore either of the "clear: left;", "clear: right;" or "clear: both;" properties have been applied to it.
Since the top AND bottom margins of X are adjoining, in the case of a normal flow we are considering the scenario where:
Then the spec says, "its margins collapse with the adjoining margins of following siblings", but there can be at most one following sibling, as pointed out above, so this essentially must mean that if there is a sibling following then the margin collapses.
"but that resulting margin does not collapse with the bottom margin of the parent block." - I don't understand this: if the bottom margin is adjacent to a sibling's top margin then it cannot be adjacent to the parent block's bottom margin unless the sibling's height is zero.
I'm utterly confused. Can someone please explain this statement in a better way, perhaps with a few illustrative examples? Thanks.
389
First, a couple of clarifications:
An element with clearance is one which has clear set to something other than none and is actually clearing a float.
An element whose top and bottom margin are adjoining means adjoining with each other, not with siblings. We're talking about a 0 height element without border or padding, so the top margin and bottom margin of the element are touching each other. When this happens, they collapse with together, a situation known as collapsing through.
Now, let's look at an example:
body {
border:solid;
}
#container {
margin: 20px;
background: blue;
}
#floated {
float: left;
width: 20px;
height: 20px;
background: red;
}
#cleared {
clear: left;
margin-top: 10px;
margin-bottom: 20px;
}
#following {
margin-top: 30px;
}<body>
<div id=container>
<div id=floated></div>
<div id=cleared></div>
<div id=following></div>
<div>
</body>Play with it here: http://jsbin.com/wuvilu/1/edit?html,css,output
Since there is a border on the body, you can see the 20px margin around the blue #container. The red #floated is also an obvious 20px by 20px.
Then, since it is 0 height with no padding and no border, the top and bottom margin of the #cleared collapse with each other. They are also adjoining with the top margin of the #following. The size of this collapsed margin is 30px, the largest of the three.
Since the #following is 0 height and has no padding and no border, our 30px margin is adjoining with the bottom margin of the #container, and would collapse with it. Except now the rule you have quoted kicks in, and it doesn't.
Since it won't collapse with the bottom margin of the container, it has to be placed somewhere within it. Where? It starts from 10px above the bottom edge of #floater, and extends 20px below. Why? The top margin of #cleared is the top-most margin that participates in this collapse margin, so we start where it would start. Since it is 10px, our collapsed margin starts 10px above the bottom edge of #floater, the element immediately before it.
Yes, this is insane, and most scenarios that involve collapsing through are insane. Collapsing through was a terrible idea, and it should never have made it into CSS, but it did before people knew better, and now we have to deal with it, and all the crazy consequences.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
