margin-top does not work in DIV in a DIV for Chrome & Safari?

[kingkong88]

I have the following:

<div style='width:100px;height:100px;background-color:red'>
 <div style='margin-top:10px;margin-left:10px;width=80px;height=80px;background-color:blue'>test</div>
</div>

This should show a blue rectangle inside a red rectangle, 10px from the top and left. This is what is shown in IE. The above code does not work in Chrome or Safari. It shows the blue rectangle 10px from the left margin but the top edge aligns with the top edge of the first DIV. Which browser is correct?

However, if I add 'border:solid red 1px' to the first DIV, then Chrome and Safari shows it like what IE shows, ie the blue rectangle is 10px from the top edge. Why is this so?

(I have a working URL specially created to demonstrate the above clearly. Please let me know if you want to see the illustration.)

Thanks.

[swa66]

Welcome to WebmasterWorld [webmasterworld.com]

You might be seeing collapsing margins:
[w3.org...]

Whenever IE and the rest of the browsers disagree on how to render something, it's a very safe bet to assume IE is the one that's wrong.

[Aarem]

Here is another example of collapsing margins:

[reference.sitepoint.com...]

It includes nice illustrations that help comprehension.

[kingkong88]

Thanks. Got it. Rather subtle. And the lengths to which the explanations are given seem to imply most people would naturally interpret nested elements with top margins to behave unlike the specifications.