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

On Thu, Nov 7, 2013 at 12:36 AM, Alan Gresley <alan@css-class.com> wrote:

> With the below code,
>
>   <div id="parent" style="background: lime; border: 10px solid blue;">
>     <div id="box" style="margin-top: 40px; margin-bottom: 80px;
> background: red;">
>       <div style="float: left; background: orange;">float</div>
>     </div>
>   </div>
>
> the border-top of the box is positioned 40px downward from the top edge of
> it's containing block (due to the margin-top) where the border-bottom is
> vertically aligned with the top edge of it's containing block. It's like
> the border-box has a negative height of -40px.
>

Hi Alan,

I would simply say that both  top and bottom border edges of the self
collapsing are 40px down the top of the parent. The top border edge
position is used to place the float, and it is defined at
http://www.w3.org/TR/CSS2/box.html#collapsed-through .  The bottom border
edge has no role here; since the box has 0 height, I would say it is at the
same position of the top border edge, this is confirmed by your next case,
using an a.p. box with "bottom" positioning.
But essentially the position of the collapsed-through border box is just
something "conventional", there is no need to use it for anything else that
positioning descendants and computing clearance, as we have already
mentioned.  Trying to use it for anything else could rise inconsistencies.



> Right at the beginning of 8.3.1 is what margin collapsing is defined as.
>
>   | Adjoining margins of two or more boxes (which might
>   | or might not be siblings) can combine to form a single
>   | margin. Margins that combine this way are said to
>   | collapse, and the resulting combined margin is called
>   | a collapsed margin.
>
> Just the simple code above shows that the margin-top has not combined with
> the margin-bottom to form a single margin.


Why? I consider this case a normal case of collapsing. The parent is 80px
height, wich is the result of the collapsing of 40px and 80px.



> Depending of which ancestor has which border-top or border-bottom, the
> border-top of the so called zero height border is vertically aligned with
> the top edge of it's containing block so child elements that are removed
> from the flow (e.g. floated or absolutely positioned) are positioned in
> respect to this top edge of this containing block. This test shows this.
>
> <div id="wrapper" style="background: yellow; border-bottom: 10px solid
> green;">
>   <div id="parent" style="background: lime; border-top: 10px solid blue;">
>     <div id="box" style="margin-top: 40px; margin-bottom: 80px;
> background: red; position: relative;">
>       <div style="position: absolute; background: red; height: 20px;
> bottom: 0;">a.p. bottom: 0;</div>
>       <div style="position: absolute; background: orange; height:
> 20px;">a.p. top: auto;</div>
>       <div style="position: absolute; background: fuchsia; height: 20px;
> top: 0;">a.p. top: 0;</div>
>     </div>
>   </div>
> </div>
>
None of this appears in the spec but UAs behaves this way.


Again, I consider this covered by the spec. The collapsed-through box has
margins that collapse to 80px.  According to the spec its top border edge
is at 40px down the top of the parent. It has 0 height, so the bottom
border edge is at the same position. This position is used to place the
a.p. boxes.  Spec and UAs are in accord.

I haven't looked at your linked pages, will do when I found the time.


@Robert:  I've seen the Øyvind has explained in great detail your case with
140px clearance.  I couldn't add anything :)


Bruno