CODEWITHSUNDEEP
css
Joy
Joy

Reputation: 9550

Margins collapse when clear:both exists

I am reading CSS Spec 2.1, and cannot understand this:

The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

And this:

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

Please check this JSFiddle, where the first-child has clear:both and it has border:

<div style="margin: 100px">
    <div style="margin: 30px; border: 1px solid red">First one</div>
    <div style="margin: 30px; clear: both">Second one</div>
</div>
<div style="clear: both">Outside box</div>

But from the Chrome Inspect, its top margin collapses with its parent and its bottom margin collapses with its sibling. Why?

Upvotes: 2

Views: 172

Answers (2)

Hugo Silva
Hugo Silva

Reputation: 6948

The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

clear: both doesn't necessarily mean the element has clearance. According to this section, if there is nothing floating, there is probably nothing clearing either:

Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge. This position is where the actual top border edge would have been if the element's 'clear' property had been 'none'.

If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

EDIT 1: I created a case where the element gets real clearance calculated, and got the same results. So I guess I missed the point here too. There is also the possibility you found a rendering bug :)

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

The border here needs to be on the element itself, not on the child as in your example.

Upvotes: 1

Brian Ellis
Brian Ellis

Reputation: 2441

While your question is a bit confusing margins do not collapse if:

  1. floated
  2. Absolutely Positioned
  3. Inline Block
  4. Overflow anything but visible
  5. root element

Your fiddle has no margins set at all for the outside box and the bottom margin would collapse regardless at is the last child in the document.

The other elements are working correctly with margins with none of them collapsing. If you're referring to box 1 and box 2 only having 30px in marging its because the margin is outside of the border in the box model formula so it would be wise to use padding instead as you can't avoid vertical margin collapse with an intervening element between the 2 elements.

Upvotes: 0

Related Questions