Here is the code:
<html>
<head>
<title></title>
<style type="text/css">
* {border: 0px; padding: 0px;}
#greenbox
{
margin: 20px;
border: 5px solid green;
}
#redbox
{
margin: 20px;
border: 5px solid red;
}
#bluebox
{
border: 5px solid blue;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 20px; /*COLLAPSES - why??*/
}
</style>
</head>
<body>
<div id="greenbox">
<div id="redbox">
red box
</div>
<div id="bluebox">
bluebox
</div>
</div>
</body>
</html>
Basically, it's a green box, which contains a red box and a blue box inside it.
Why isn't the vertical space between the red box and blue box 40px?
I understand that the bottom-margin of the red box and the top margin of the blue box have 'collapsed', but it was my understanding that margins do not collapse if you have a border, or padding (I've tried both - still the same result.