[html/css] Demande conseil pour balise DIV

Bonjour,

Alors voilà:
Je suis donc un webmaster aspirant, c'est à dire: un maternelle à l'école du html/css. Je m'entraîne donc à créer plusieurs pages web et mini-sites en m'aidant des tutos sur le net ect.

Mon problème:
Je voudrais faire en sorte que mes éléments DIV adopte un espace automatique de supposons 50px ou 5% entre chacun d'eux (espace vertical), comme un blog fait sur skyblog par exemple: Le contenu peut s'agrandir ou diminuer dans l'élément, il resterait toujours 50px ou 5% entre div1 et div2, sans que div1 ne deborde sur div2.

Mes caprices:
-Pas de Jvs, ni de php; je souhaite rester en xhtml pur et dur.
-Je ne vous collerez pas mon code car le contenu est trop long pour en arriver à l'essentiel; je vous en trafic un subsitue de suite:

Mon code ressemble actuellement à ça:

<div id="p1">prout</div>
<div id="p2">pouet</div>

Celui de la feuille de style:

div { 
      La solution: pourrait-elle se placer ici ?;
}

#p1 {
      position: absolute;
      top: 50px;
}
<!-- En supposant que p1 fasse 100px de hauteur ... -->
#p2 {
      position: absolute;
      top: 200px;
}

Car actuellement, Je suis obligé de me taper des id785 et des #785 en précisant à chaque fois quelques px ou % de plus entre les id... Ce qui n'est vraiment pas simple, pratique, rapide, efficace et propre ...

Je vous remercie d'avance, ça m'aiderait beaucoup et me ferait gagner beaucoup de temps, merci à vous.