CSS Margin entre div

Question

J'ai un code html très simple mais je ne comprends pas où est le problème.

Je possède ce code:

.margin { 
 
    margin: 10px; 
 
}

<div> 
 
    <div class="margin">Test test</div> 
 
    <div class="margin">Test test</div> 
 
    <div class="margin">Test test</div> 
 
</div>

Je voudrais donc une marge de 20px entre les divs. Mais en fait le navigateur n'entre que 10px entre les divs.

Comment c'est possible? Quelqu'un peut m'aider?

Answer 1

c'est normal, le comportement par défaut de la propriété "margin". la marge prend le maximum de la marge entre les deux div

utilisation margin:20px si vous voulez une marge de 20px entre la div

Answer 2

Il fusionne les deux marges. Je vous recommande d'utiliser quelque chose comme:

.margin { 
    margin: 20px 10px; 
} 

Answer 3

marges de l'effondrement des éléments adjacents - que plus l'un des deux s'appliqueront, l'autre est ignorée. Voyez mon exemple.

div { 
 
    border: 1px solid green; 
 
} 
 
.margin1 { 
 
    margin: 10px; 
 
} 
 
.margin2 { 
 
    margin: 20px; 
 
} 
 
.margin3 { 
 
    margin: 30px; 
 
}

<div> 
 
    <div class="margin1">Test test</div> 
 
    <div class="margin2">Test test</div> 
 
    <div class="margin3">Test test</div> 
 
</div>

Si vous voulez avoir 20px entre vos DIVs, faites comme suit:

div { 
 
    border: 1px solid green; 
 
} 
 
.margin { 
 
    margin: 10px; 
 
    margin-bottom: 20px; 
 
} 
 
.margin:last-child { 
 
    margin-bottom: 10px; 
 
}

<div> 
 
    <div class="margin">Test test</div> 
 
    <div class="margin">Test test</div> 
 
    <div class="margin">Test test</div> 
 
</div>