Question

Using this really simple html / css (http://jsfiddle.net/XXzTj/)

<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>

The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just ‘blank space’.

Am I going mad or have I done something wrong?

Answer 1

try this —

<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>

http://jsfiddle.net/XXzTj/1/