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

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.

> The collapsing is more evident in case of same sign for the two margins,
> like in the mentioned tests.
> Or, wanting to use negative values in something like
>
> <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;"></div>
>    <div class="following-sibling">Text</div>
> </div>
>
> Here "following-sibling" starts at 50px from the top of the float, and this
> cannot be explained without collapsing.

I agree that there is collapsing in this test since both the margins go 
in the same direction which is above the zero height box (border box).

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>

> So, while I can agree with Alan that
> "a margin top will not have any effect on the position of the top border
> edge of an element with clearance",
> the margin top can still have an effect (due to self-collapsing) on what
> follows.
>
> Bruno

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

Alan



1. http://www.w3.org/TR/CSS21/box.html#collapsing-margins
2. http://www.w3.org/TR/CSS21/box.html#collapsed-through


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 28 October 2013 23:39:19 UTC