Margin problems!

I'm developing a basic website for my partner but I'm having some problems with a margin.


<div class="layer1">
<div class="layer2">
<div class="layer3">
<div class="layer4">
<p>I don't understand what's going on here. The margin on layer4 is affecting layer1, layer 2, and layer3?</p>
<p>They grey border above should line up with the grey border on the right, and the text here should have a 20px margin from the top border</p>
<p>More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here. More content goes here.</p>
</div>
</div>
</div>
</div>



.layer1 { background-image: url(template_images/topmiddle.gif); background-repeat: repeat-x; background-position: top; }
.layer2 { background-image: url(template_images/topleft.gif); background-repeat: no-repeat; background-position: left top; }
.layer3 { background-image: url(template_images/topright.gif); background-repeat: no-repeat; background-position: right top; }
.layer4 { margin: 20px; }


My question is, why does the layer4 margin affect layer1?

helenquartley.html (http://www.helenquartley.co.uk/new_template/helenquartley.html)

What you're saying with the 20px margin is that that the top of that element has to be 20px from the adjacent element. Now, layer4 is right at the top of layer1, so in order for layer 4 to have the margin, so does layer1.

Also, here, depending on which browser you're using, there is a default top margin on the p element which would also push things down. It's generally a good idea to set all the default margins to zero, since different browsers use different defaults. So have this at the top of your css:

*{margin:0;padding:0;border:none}

Now, to acheive the effect you want you can use padding, rather than margin, to position what you want - padding will be push content within the div down, whereas margin will push the div down. So:

.layer4{padding:20px}

should do the trick.