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

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?

Thanks,
Robert



On 27 October 2013 05:20, Bruno Fassino <fassino@gmail.com> wrote:
> On Sun, Oct 27, 2013 at 12:16 AM, Robert Hogan <robhogan@gmail.com> wrote:
>>
>>
>> On Oct 26, 2013 5:31 PM, "Bruno Fassino" <fassino@gmail.com> wrote:>
>> > So the margins of our "self-collapsing-with-clearance" collapse together
>> > to 80px and the top border edge of the box is at 40px in the middle of that.
>> > Clearance has to be added to this position, not to the whole 80px.  So
>> > clearance is 60px as stated in the test, not only 20px.
>>
>> I'm not clear where this rule to use the middle of the collapsed margin
>> follows from. Is it just the common sense location of a border box for the
>> element, halfway between its two margins as though the collapse makes both
>> 40 px each, or is there something else in play?
>
>
> It comes from http://www.w3.org/TR/CSS2/box.html#collapsed-through .
> When two margins collapse there must be a conventional position where to put
> the border box of the element.
> In our case (no collapsing with the parent) this part of the spec applies:
> "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."
> Essentially the top border edge is the same as if there were no collapsing,
> so in our case it is at 40px (the top margin) from the top margin edge. (It
> happens to be exactly in the "middle" just for chance).
>
> This interpretation may be a bit "forced", especially because the mentioned
> spec continue saying:
> "Note that the positions of elements that have been collapsed through have
> no effect on the positions of the other elements with whose margins they are
> being collapsed; the top border edge position is __only__ required for
> laying out descendants of these elements."
>
> And we are using that position  for computing the needed clearance, which is
> something else.
>
> Bruno
>

Received on Monday, 28 October 2013 13:12:11 UTC