Sent by Philippe Wittenbergh on 12 July 2004 15:03
On Jul 12, 2004, at 6:21 pm, Andy Budd wrote:
> Whenever 2 margins touch they collapse. If you're div doesn't contain
> any real content then the top margin will collapse into the bottom
> one. This is why you're top set of examples don't work but your bottom
> set does.
>
> see
>
> http://www.andybudd.com/archives/2003/11/no_margin_for_error/index.php
>
> for a better explanation.
That is not entirely correct: vertical margins never collapse between
floated blocks, or between a floated block and a non floated block.
<http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
they do collapse between blocks in normal flow. <quote>Two or more
adjoining vertical margins of block boxes in the normal flow
collapse</quote>.
Michael is seeing a bug in older Gecko version(s) Mozilla (pre 1.4, I
think). In recent Mozilla, or Firefox (tested: OS X), there is a space
between the grey, floated div, and the non floated div.
<http://dev.l-c-n.com/Gecko/moz_clear_Mike.png>
This is consistent with the display in IE mac, Safari, Opera7 (Mac).
Michael statement that a div containing some characters (a, c, e, f, h,
i, j, l,...) baffles me a bit, as any of these characters inserted in
the clearing div do 'work' for the intend (using Michaels testfile)
**note here** Even though the clearing div specifies 1px for the
font-size; the character displays as 10px in my browser(s) - I have a
preference set to never display fonts smaller than 10px (or even 11px
in Firefox, my default browser). This however, doesn't affect the the
distance between the floated div and non floated div. It hence seem
better to use a non-breaking space, which at least is invisible.
Preventing margin collapsing between a floated element and a non
floated element is best done with a clearing element that has content.
A test file:
<http://dev.l-c-n.com/_temp/collapsing_margins2.php>
Philippe
---/---
Philippe Wittenbergh
now live : <http://emps.l-c-n.com/>
code | design | web projects : <http://www.l-c-n.com/>
IE5 Mac bugs and oddities : <http://www.l-c-n.com/IE5tests/>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
