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

Need information on clearance and margin-collapsing

From: Daniel Schattenkirchner <schattenkirchner.daniel@gmx.de>
Date: Fri, 11 Jun 2010 21:26:23 +0200
Message-ID: <4C128DDF.7090907@gmx.de>
To: www-style@w3.org
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?

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: 
<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.

This reminded me of [1] again:

> If the top and bottom margins of a box are adjoining, then it is
possible for margins to collapse through it.

> ... the element's parent is not taking part in the margin collapsing,
>  ... 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.

My question is which rendering is correct.

At first I thought that there should be no gap, because the whole margin 
is pushed "behind the float". But after reading that section above I'm 

Does the last quoted paragraph require that the margin is only partially 
(namely margin-top) pushed behind the floated element?

Kind regards, Daniel

[1] http://www.w3.org/TR/CSS2/box.html#collapsing-margins
[2] http://www.w3.org/TR/CSS2/visuren.html#flow-control
Received on Friday, 11 June 2010 19:26:46 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:47 UTC