views:

215

answers:

1

Let's say I have the following minimalistic HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<body style="background-color:silver; padding:0px; margin:0px;">
  <div style="background-color:Lime;">
    <h1>Title</h1>
  </div>
</body>
</html>

There's a gap at the top of the page, it seems as if only the H1's background is colored in lime, or as if the H1 is pushing down the parent div tag. However, if I add "border:solid 1px red;" to the div's style the entire div's background is in lime, not just H1's. I tested it with IE8, FF3.5, and Chrome. They all have the same behavior. If I remove the XHTML strict DocType it works as "expected." What am I missing? Thanks.

+1  A: 

What I was "missing" was the concept of collapsing margins. By specifying a border for the div I effectively un-collapse the margins which gives me the expected result. The other method to un-collapse would be to give the div at least a padding of 1px. Unfortunately neither of these is acceptable in my situation, i.e. I don't want a border or padding on the div, so I will have to find a different solution, but at least it explains the behavior.

pbz