Pourquoi les marges de mes div se chevauchent-elles et comment puis-je y remédier ?

Question

Je ne comprends pas pourquoi les marges de ces divs se chevauchent.

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}

<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

Answer 1

Je pense qu'il s'agit d'une marge effondrée. Seule la plus grande marge entre le bas du premier élément et le haut du second est prise en compte.

Il est normal qu'il n'y ait pas trop d'espace entre deux paragraphes, par exemple.

Vous ne pouvez pas éviter cela avec deux éléments adjacents et vous devez donc agrandir ou réduire la marge la plus grande.

EDIT : cf. W3C

Deux marges sont contiguës si et seulement si :

• les deux appartiennent à des boîtes de niveau bloc en flux qui participent au même contexte de formatage de bloc
• aucune boîte de ligne, aucun espacement, aucun rembourrage et aucune bordure ne les sépare
• appartiennent tous deux à des arêtes de boîte adjacentes verticalement

Il n'y a donc pas d'effondrement avec float qui retire l'élément du flux.

Answer 2

Les marges, contrairement au rembourrage (qui remplit une largeur spécifique), sont une "distance minimale".

La distance ne sera pas la même pour tous les éléments.

Comme vous pouvez le constater, le prendre contact la marge inférieure du bloc est encadrée par la zone de saisie. C'est la marge active ici. L'autre marge, la marge supérieure de la zone de saisie, n'est pas en vigueur, car elle est plus petite et n'atteint pas un élément de bloc où elle serait en fait repousser l'élément. Les deux marges se chevauchent et ne s'influencent pas l'une l'autre.

Answer 3

J'avais posté une question similaire, dont la réponse se trouve à l'adresse suivante : http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

Ajouter une balise div claire entre les deux objets

Answer 5

Pourquoi ne pas ajouter 10px à votre marge inférieure dans la classe .contact ?