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

On Tue, Oct 29, 2013 at 12:38 AM, Alan Gresley <alan@css-class.com> wrote:

> On 29/10/2013 3:07 AM, Bruno Fassino wrote:
>
>> On Mon, Oct 28, 2013 at 4:43 PM, Robert Hogan <robhogan@gmail.com> wrote:
>>
>>  HI Alan,
>>>
>>> On 28 October 2013 14:27, Alan Gresley <alan@css-class.com> wrote:
>>>
>>>> Sometimes it helps to have a peak (see below code) to understand where
>>>> something is located if it could seen. The
>>>> self-collapsing-with-clearance
>>>> element does not have any collapsing margins.
>>>>
>>>>
>>> That seems like a controversial suggestion, the div is clearly
>>> self-collapsing so must have a collapsed margin value of 0. Can you
>>> explain why its top and bottom margins do not collapse with each
>>> other?
>>>
>>>   <div id="self-collapsing-with-**clearance" style="clear:
>>> both;margin-top: -40px; margin-bottom:40px;"></div>
>>>
>>>
>> I agree that we have collapsing here, even if this is not particularly
>> evident.
>>
>
> Hello Bruno and Robert.
>
> They are apposing margins on the opposite side of a block box. Apposing
> margins do not collapse with each other. Only adjoining margins collapse as
> is stated in §8.3.1 [1]. I don't even think the spec is clear on this.
>
> The above test with margin-top: -40px' and 'margin-bottom: 40px' are
> opposing margins.



I don't see in the spec any evidence that these margins should not be
considered adjoining. Exactly like when they are both positive or both
negative, they are the 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".

The result of the collapsing in this case is simply the "algebraic" sum of
the two values, so I would say this is a not interesting collapsing,
however I see no reason to say this is not a collapsing.


In the below test (combing my test with Bruno's), we will peak again but by
> inserting a absolutely positioned span within the box with clearance. Be
> sure to check in Chrome since it has the 'Text' overlapping the float.
> Firefox, Opera and IE10 seems to do it correctly where the 'Text' is beside
> the float.
>
> See far below about Chrome behaviour in respect to
> 'margin-collapse-clear-012.**htm' in the test suite.
>
>
> <!DOCTYPE html>
>
> <style type="text/css">
> .following-sibling { background: lime; }
> span { position: absolute; width:300px; border-top: 1px solid teal; }
> hr { clear: left; margin-top: 100px; } /* to positioned the 'hr' 100px
> below 'Text' */
> </style>
>
>
> <div class="parent">
>   <div class="float" style="float:left; height: 100px; width: 100px;
> background-color:blue;"></div>
>   <div class="self-collapsing-with-**clearance" style="clear: both;
> margin-top: -40px; margin-bottom: -90px;"><span>1. clear-left</span></div>
>   <div class="following-sibling">Text (with ajoining margins)</div>
> </div>
>
> <hr>
>
>
> <div class="parent">
>   <div class="float" style="float:left; height: 100px; width: 100px;
> background-color:blue;"></div>
>   <div class="self-collapsing-with-**clearance" style="clear: both;
> margin-top: -40px; margin-bottom: 40px;"><span>1. clear-left</span></div>
>   <div class="following-sibling">Text (with opposing margins)</div>
> </div>
>
>
Yes, Chrome has the text overlapping the float. This occurs also in other,
simpler cases like

<div class="float" style="float:left; height: 100px; width: 100px;
background-color:blue;"></div>
<div style="clear: both;">clear</div>
<div style="margin-top: -50px">Next</div>

The behavior of other browsers, which show no overlapping here, looks more
correct than Chrome.




> Chrome passes this margin-collapse-clear-012.htm by a differing behaviour
> to Firefox, Opera and IE10. I believe that other processes are going on
> since the 'following-sibling' is of zero height. Below is a test case based
> on 'margin-collapse-clear-012.htm' in the test suite. Why does Chrome show
> different?
>
> http://css-class.com/test/css/**box/margins/margin-collapse-**
> clear-012.htm<http://css-class.com/test/css/box/margins/margin-collapse-clear-012.htm>
>

Yes, Chrome positions differently the absolutely positioned box that should
reveal the position of the collapsed through box.  I don't know why, but I
consider correct the behavior of the other browsers.


Bruno

Received on Tuesday, 29 October 2013 10:33:29 UTC