Sto cominciando a studiare l'HTML+CSS e sto provando a creare un mini sito in modo da fare pratica con l'HTML e il CSS.

Questo mini sito è composto da 4 pagine e principalmente è strutturato così:
un div contenitore che contiene:
1) un div testata con il titolo della pagina;
2) un div menu con appunto il menu di navigazione;
3) un div corpo con dentro le informazioni relative ad ogni pagina;

1) e 2) rimangono sempre uguali ad ogni pagina.

Ora il problema è nel div id="corpo" della pagina contatti.

Praticamente in questa pagina creo un div all'interno del div corpo e quando vado a inserire il top-margin del div piccolo, tutto il corpo vine giù di quanti pixel ho inserito nel top-margin del div piccolo ( scusate il gioco di parole).

Vi posto il codice per farvi capire meglio:

HTML:
codice:
<div id="corpo">
   <div id="form">
   </div>
</div>
CSS:
codice:
#corpo{background:#484848; margin-top:10px; height: 360px; border-radius:10px;}
#form{width:50px; height:50px; border:1px solid #FFF; margin:0px auto;}
Ora se all'interno del comando #form{} vado a modificare il valore margin:30px auto; anche il div corpo scende di 30 px, come mai???