W3C home > Mailing lists > Public > public-css-testsuite@w3.org > October 2013

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

From: Alan Gresley <alan@css-class.com>
Date: Tue, 29 Oct 2013 01:27:06 +1100
Message-ID: <526E743A.3000409@css-class.com>
To: Robert Hogan <robhogan@gmail.com>, Bruno Fassino <fassino@gmail.com>
CC: Public CSS test suite mailing list <public-css-testsuite@w3.org>, Gérard Talbot <css21testsuite@gtalbot.org>
On 29/10/2013 12:11 AM, Robert Hogan 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?
>
> Thanks,
> Robert


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.

Any margin will push a block box downwards from the top content edge of 
it's containing blocks (it's margin top is vertically aligned or level 
with the top content edge of it's containing block). If the margin is 
negative, then it top edge (margin top edge) will be positioned above 
the top content edge of it's containing block.

Now if a block box is a box with clearance (it occurs after a float in 
the flow), it's margin top is completely ignored. Any margin 
(margin-top: 1000px or margin-top: -1000px) will never change it's 
position. It border top will be vertically aligned or level with the 
margin bottom (margin box) of the float.

So the reason why the 'Text' is 40px below the float is since the zero 
height block box with clearance has a bottom margin of 40px.

Alan



<!DOCTYPE html>

<style type="text/css">
.parent {background: lavender;}
.self-collapsing-with-clearance {background: red;}
.following-sibling {background: lime;}
.peak {height: 20px;}
</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:40px;"></div>
   <div class="following-sibling">Text</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 peak" style="clear: both; 
margin-top: -40px; margin-bottom:40px;">a peak</div>
</div>

<div class="parent">
   <div class="float" style="float:left; height: 100px; width: 100px; 
background-color:blue;"></div>
   <div class="self-collapsing-with-clearance peak" style="clear: both; 
margin-top: -40px; margin-bottom:40px;">a peak</div>
   <div class="following-sibling">Text</div>
</div>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Monday, 28 October 2013 14:27:37 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:13:26 UTC