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

Pour un nombre inconnu d'enfants que vous pourriez utiliser.

#parent > * {
    margin: 30px 0;
}

Cela ajoutera une marge supérieure et inférieure de 30px à tous les enfants directs de l'élément #parent .

Pero img n'est pas affiché par défaut dans le bloc, vous pouvez donc utiliser :

#parent > * {
    display: block;
    margin: 30px 0;
}

Les marges verticales des éléments du bloc seront réduites. Mais vous aurez des marges en haut et en bas de votre div parent. Pour éviter cela, utilisez le code suivant :

#parent > * {
    display: block;
    margin-top: 30px;
}

#parent > *:first-child {
    margin-top: 0px;
}

Cela n'ajoutera que la marge supérieure et supprimera cette marge supérieure pour le premier élément.

Answer 2

Le fichier css suivant fonctionnera bien

div > *:not(:last-child) {
    display: block;
    margin-bottom: 30px; 
} 

> sélectionne tous les éléments qui sont des enfants directs de l'élément div (afin d'éviter les problèmes d'espacement interne), et ajoute une marge inférieure à tous les éléments qui ne sont pas le dernier enfant, en utilisant la commande :not(:last-child) (pour ne pas avoir d'espace à la fin).

display: block s'assure que tous les éléments sont affichés sous forme de blocs (occupant leurs propres lignes), ce qui img ne le sont pas par défaut.

Answer 3

Vous pouvez facilement le faire avec :

#parent > * + * {
  margin-top: 30px;
}

Elle s'appliquera à tous les enfants directs, à l'exception du premier, de sorte que vous pouvez la considérer comme une écart entre les éléments.

Answer 4

La méthode la plus simple est probablement la suivante :

#parent * {
  margin-bottom: 30px;
}

o

#parent * {
  margin: 15px 0;
}

Gardez à l'esprit, cependant, que cela va devenir todo en #parent y compris les choses à l'intérieur de la p y div balises. Si vous voulez seulement les enfants directs, vous pouvez utiliser #parent > * (c'est ce qu'on appelle le sélecteur direct descendant) à la place.

N'oubliez pas, <img> est un élément inline par défaut, donc vous devrez peut-être le faire :

#parent img {
  display: block;
}

pour qu'il utilise les marges.

Answer 5

Créez une classe CSS pour eux avec du code :

.BottomMargin
{
    margin-bottom:30px;
}

Et assignez cette classe à parent en utilisant jQuery ou manuellement comme ceci :

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

le dernier peut ne pas en avoir et ceci est également faisable en utilisant jQuery.