Comment espacer les enfants d'un div avec css ?

Question

Je veux un espace de disons 30px ; entre tous les enfants de mon div. Par exemple, si j'ai :

<div id="parent">    
   <img ... />
   <p>...</p>
   <div>.......</div>
</div>

Je veux qu'ils soient tous séparés par un espace de 30px ;. Comment puis-je faire cela avec CSS ?

Answer 1

Vous pouvez l'essayer en utilisant les standards CSS :

div > *{
   margin-top:30px;
}

Plus d'informations peuvent être trouvées ici : http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 2

Il suffit de mettre une marge supérieure et inférieure de 30px sur votre p élément :

p { margin: 30px 0 30px 0; }

Note : ce qui précède ajoutera cette marge à todo vos éléments p. Pour vous limiter à ce seul élément, ajoutez un attribut de style en ligne :

<p style="margin: 30px 0 30px 0;">...</p>

ou mieux utiliser une classe :

<p class="mypara">...</p>

et en css :

p.para { margin: 30px 0 30px 0; }

En fait, la notation de la marge est la suivante :

margin: top right bottom left;

Vous pouvez également spécifier individuellement les marges supérieure et inférieure :

margin-top: 30px;
margin-bottom: 30px;

Vous pourriez donc avoir une classe comme celle-ci :

.bord { margin-bottom: 30px; }

et ajoutez cette classe à tous les éléments dont vous voulez qu'ils aient une marge inférieure de 30px :

<div class="bord">....</div>

Answer 3

Le moyen le plus sûr est d'ajouter une classe à tous les éléments internes, à l'exception du dernier.

<style>
.margin30 {
   margin-bottom: 30px;
}
<div id="parent">    
  <img class="margin30" ... />
  <p class="margin30">...</p>
  <div>.......</div>
</div>

De cette façon, les éléments supplémentaires peuvent simplement être étiquetés avec la classe. N'oubliez pas que vous pouvez classer plusieurs éléments de style en les séparant par des espaces dans la valeur de la classe dans la balise, comme suit :

<img class="margin30 bigimage" ... />

Enfin, vous pouvez attacher les classes dynamiquement avec Javascript (le code vient de ma tête, il n'a pas été testé, il n'y a pas de contrôle d'intégrité ou de gestion des erreurs, etc :)

function addSpace(elementId) {
   children = document.getElementById(elementId).childNodes;
   for (i=0;i<(children.length - 1);i++)
      children[i].className = "margin30 " + children[i].className;
}