Check out this code snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {border: 0px; padding: 0px;}
#greenbox
{
margin: 20px;
border: 5px solid green;
}
#redbox
{
background-color: red;
margin: 20px;
float:left;
width:50%;
}
#bluebox
{
background-color: blue;
margin: 20px;
width: 50%;
}
</style>
</head>
<body>
<div id="greenbox">
<div id="redbox"> red box </div>
<div id="bluebox"> blue box </div>
</div>
</body>
</html>
As per the W3C standards, the background-color property should only affect the content, padding, and border area, not the margins. However, in this case, even though there is a 20px margin between the red box and blue box text, it appears that the background color of the blue box includes the top margin as well. The concept of collapsing margins could be at play here but doesn't seem to fully explain the issue.
Any ideas on what might be causing this behavior?