Comment fonctionne la marge CSS ?

Question

Dans le code suivant, la marge entre .box1 et .box2 être 20px comme le .box1 a une marge inférieure de 10px et .box2 a une marge supérieure de 10px.

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS :

.box1{
    margin-bottom: 10px;
}

.box2{
    margin-top: 10px;
}

http://jsfiddle.net/3C7bW/

Answer 1

Non, la marge ne sera que de 10px entre les 2 boîtes.

Vous dites deux fois la même chose, "qu'il doit y avoir une marge de 10px en dessous de l'encadré 1". et "qu'il doit y avoir une marge de 10px au-dessus de la case 2".

Pensez-y de la manière suivante :

Il y a 2 personnes, Harry et Sally. Harry se tient à 3 mètres de Sally. À quelle distance se trouve Sally de Harry ? Oui, vous avez trouvé, 3 mètres !

Answer 2

La marge inférieure de la première case et la marge supérieure de la deuxième case sont considérées comme étant contiguës ; par conséquent, elles effondrement en un seul.

Notez que cela ne s'applique qu'aux marges verticales ; les marges horizontales ne se réduisent jamais, quelles que soient les circonstances. Si vous faites flotter les deux boîtes de manière à ce qu'elles soient alignées horizontalement, et que vous donnez à .box1 une marge droite et .box2 une marge gauche, l'espace total entre eux serait en effet de 20px .

En fait, même si vous n'a pas les aligner horizontalement, mais les faire flotter et leur donner de l'espace afin que .box2 efface .box1 , les marges inférieure et supérieure ne s'effondrent plus . Ces deux cas sont également mentionnés dans la spécification.

Answer 3

Vous devez savoir ce qu'est l'effondrement des marges. L'image suivante décrit elle-même l'effondrement des marges.

Answer 4

Les marges sont à l'extérieur de votre élément DOM et sont destinées à d'autres marges, comme la transparence, de sorte qu'elles se chevauchent.

Si vous le faites avec le padding, cela fonctionnera bien car le padding est à l'intérieur du div.

Voici une explication assez simple du fonctionnement des marges et des paddings.

Answer 5

Lisez sur l'effondrement des marges

Cela doit vous aider https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing