Having the HTML below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
<div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>
the space between those two DIVs is only 10 pixels.
Why? Explain please.
That behavior is called collapsing margins. The margin values are not added but the higher value is used: