Probleme div

Hello,

j'ai un problème en xhtml/css , je ne comprend pas pourquoi quand je met margin-top:Ypx dans #bkgd pourquoi la div #border suit et est aussi affecter par ce margin.voici mon code :

xHTML :

<div id="border">
<div id="bkgd">
</div>
</div>

CSS :

body
{
width:1024px;
height:768px;
background-color:black;
color:grey;
border:red 1px solid;
}

#border
{
background-image:url('../img/1.png');
width:1024px;
height:768px;
}

#bkgd
{
background-image:url('../img/2.png');
height:100%;
width:100%;
background-repeat:no-repeat;
}

Je vous remercie d'avance de votre aide .