Re: Issue with margin-collapse-clear-012.htm and margin-collapse-clear-013.htm

HI Alan,

On 6 November 2013 23:36, Alan Gresley <alan@css-class.com> wrote:
>
>
> I would say that they are not collapsing but more overlapping of the margin-top and margin-bottom since the border boxes are not aligned vertically.
>

As Bruno pointed out the behaviour of the margins in
self-collapsing-with-clearance seems to be covered by
http://www.w3.org/TR/CSS2/box.html#collapsing-margins: "Two margins
are adjoining if and only if: [..] both belong to vertically-adjacent
box edges, i.e. [..] 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."

It's hard to get past that statement - the margins of a
self-collapsing box collapse together.

Bruno also pointed out
http://www.w3.org/TR/CSS2/box.html#collapsed-through which says: "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." I think that's what
accounts for the behaviour you are seeing with regard to the
positioning of the border box of self-collapsing blocks.

The question is how we apply both of these rules to the case where we
have a negative margin top and the margins collapse to zero:

<div id="parent">
  <div id="float" style="float:left; height: 100px; width: 100px;
background-color:blue;"></div>
  <div id="self-collapsing-with-clearance" style="clear: both;
margin-top: -40px; margin-bottom:40px;"></div>
  <div id="following-sibling">Text</div>
</div>

Per the spec, the only behaviour I can understand is :

- The margin-top of -40px pulls the self-collapsing block up to a
starting position 40px above the float.
- Then clearance is applied and in order to clear the float we
calculate clearance of 140px which places the border-top of the
self-collapsing block flush with the bottom of the float.
- Now we collapse the margin-top and margin-bottom together to get a 0px margin.
- We now place following-sibling below the self-collapsing block.
Since we have a 0px margin following-sibling has to be placed directly
below the float.

I say this because I don't understand why we would calculate 140px
clearance from the top of the float, when we ought to calculate it
from 40px above the float in order to place the block flush with the
border bottom of the float.

Hopefully someone will have the patience to show me where I'm going
wrong in this interpretation!

THanks,
Robert

Received on Thursday, 7 November 2013 19:24:19 UTC