Question

Below I have a h3 tag inside a div.

#one {
  width:300px;
  height:200px;
  background-color:black;
  color:white;
}

h3 {
 margin-top:20px;
}

    <div id="one">
<h3>Coming Soon My Tools</h3>
</div>​

When rendered the top margin of the div is being moved instead of the top margin of the h3 tag. see demo http://jsfiddle.net/EnigmaMaster/aZnjx/1/

Does anyone know why this happens?

If I put something inside the div before the h3 tag then the margin adjusts properly, also if I add display: inline-block to the h3 tag it renders properly then also. Im not looking for a solution to my problem. Im looking for info on the issue. Has anyone else ran into this issue before?

Answer 1

I can’t find the information now that supports my idea, but as far as I know, the div is a box with no margins. So you would get a ‘margin collapse’ of the div margins and the h3 margins. If you add any text between the div and the h3 tag, you actually create a new block and the h3 margin is added as an offset to that block.
Same goes for adding a 1px border to the div. The ‘collapse’ behavior disappears then.
As said, I can’t find the information that supports this, but fiddling around with your url demonstrates the behavior.