- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 29 Oct 2013 01:27:06 +1100
- 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