Posted by Toby A Inkster on 03/05/07 11:12

Mike Barnard wrote:

> The expectation would normally be two pieces of content seperated by
> 50px of margin, but IE removes the 20px and leaves a 30px margin only.

It's more a case of this:

<div style="border:1px solid red">
<div style="margin: 30px">
<p style="margin: 20px">Blah</p>
</div>
</div>

How far should "Blah" be inset from the red border? 50px? No, only 30. The
margins collapse into each other. This is the proper behaviour and is
specified in the CSS 2 Recommendation, but sometimes browsers screw it up
a bit -- MSIE in particular.

However, when borders are added, then things change slightly. I think
adding a 1px border to the inner DIV in the above example, should
uncollapse the margins.

It's all fairly complicated, so I'm not surprised that browsers get it
wrong occasionally. Luckily, most of the time, you don't even need to think
about these things; they just work.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

[Back to original message]