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

Hi Bruno,

So am I correct in understanding you to say that (1) regardless of the
margin-top/margin-bottom values on self-collapsing-with-clearance it's top
border edge should always be just after the float, (2) that when the
margins of self-collapsing-with-clearance collapse together they do so at
the position that is the computed value of the clearance from the top of
the float (in this case 140px), with the result that any subsequent
siblings use that clearance as their de-facto margin-top?

After playing with this a bit more I think the result in IE and FF is
because they are not collapsing margin-top and margin-bottom together. If
you play with the margins in web inspector you'll see what I mean. Changing
the negative margin-top value has no effect, while increasing the
margin-bottom pushes the subsequent sibling down further.

So maybe the answer is just to not treat the two margins as collapsing when
we have clearance?

Thanks,
Robert



On 28 October 2013 15:52, Bruno Fassino <fassino@gmail.com> wrote:

> On Mon, Oct 28, 2013 at 2:11 PM, Robert Hogan <robhogan@gmail.com> wrote:
>
>> HI Bruno,
>>
>> That seems sensible. However I'm having trouble making sense of the
>> case where negative margins are involved.
>>
>> <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>
>>
>> FF and IE both render the 'Text' 40px below the float. Can you help me
>> understand why?
>>
>
>
> Following the same lines as before, I believe that here a clearance of
> 140px is needed to put the top border edge of
> self-collapsing-with-clearance just after the float. The margins of
> self-collapsing-with-clearance collapse to zero and its margin edge (both
> top and bottom) is 40px below the float (the top border edge is "outside" /
> higher than the margin edge).
> following-sibling the starts at 40px below the float.
>
> Bruno
>
>