W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: Need information on clearance and margin-collapsing

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 6 Aug 2010 16:29:19 -0700
Message-ID: <AANLkTinjeYRCNr306ixvbASye9_165gneSx8dpEqgiUS@mail.gmail.com>
To: Daniel Schattenkirchner <schattenkirchner.daniel@gmx.de>
Cc: www-style@w3.org
On Fri, Jun 11, 2010 at 12:26 PM, Daniel Schattenkirchner
<schattenkirchner.daniel@gmx.de> wrote:
> Hello WG,
>
> I have a question concerning clearance and margin-collapsing.
>
> CSS 2.1 states [1]:
>> .. collapsing margins means that adjoining margins (no ... clearance
>
> separate them) ... combine to form a single margin.
>
> At first I thought this means that a clearing element that consists only of
> margin-top and margin-bottom can't have its margins collapse, but that's not
> what browsers implement.
>
> Am I correct that this only refers to the definition that clearing elements
> can't have their margin-top (and the margins collapsed with that) collapse
> with their parent't margin-bottom?

No, clearance is placed above the top margin of the clearing element,
and so it's actually referring to the fact that the top margin of the
clearing element no longer collapses with *preceding* margins, such as
the margin-bottom of a previous sibling.

> Again, CSS 2.1 states [2]:
>
>> Clearance is introduced as spacing above the margin-top of an element.
>
> Assume this testcase:
>
> <div style="float: left; width: 100px; height: 100px; background-color:
> green"></div>
> <div style="clear: left; margin-top: 10px; margin-bottom: 40px;"></div>
> <div style="background-color: blue;">I'm a helper element.</div>
>
> So, we've got a single margin of 40px.
>
> Currently, this is rendered differently among browsers..
>
> IE (8 and 9's Platform Preview) and Safari render no gap between the green
> square and the blue line.
>
> Gecko and Presto expose a gap of 30px.

The Gecko/Presto is correct per spec in this case.  It's pretty complex, though.

First, we need to establish the hypothetical position, so we can
figure out how much clearance we need.  So we temporarily ignore the
clear and collapse the element's margins.  There's an important
clarification here, though.  Per 9.5.2, we only collapse the top
margin of the element with "previous adjacent margins".  In
particular, we do *not* collapse it with its own bottom margin.  So
there is 10px of margin total after the collapse occurs (because
nothing collapses).

So, 90px of clearance is generated to push the hypothetical position
flush with the bottom of the float.

Then the blue element is positioned.  The orange element's position
has no effect on the blue element's position (per 8.3.1, last
paragraph of bullet 6, the position is just for positioning its
children), but the margins of the blue element still interact as
normal.  So the two margins of the orange element collapse together
and with the 0px margin of the blue, for a total of a 40px margin on
the blue element.  90px of clearance + 40px of margin = 130px from the
top, or 30px separation from the orange element.

(I'm *pretty* certain that all of this is correct.  Not 100%, though.
I'm working on making this clearer.)


~TJ
Received on Friday, 6 August 2010 23:30:12 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT