CSS Margins Overlap Problème

Question

S'il vous plaît voir mon code, je ne comprends pas pourquoi les marges de ces divs se chevauchent.

<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> 

Le CSS:

.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;} 

---

Answer 1

Je pense qu'il est une marge affaissée. Seule la plus grande marge entre le bas du premier élément et le haut de la seconde est prise en compte.

Il est tout à fait normal de ne pas avoir trop d'espace entre deux paragraphes, par exemple.

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

EDIT: cf. W3C

Deux marges sont attenants si et seulement si:

• appartiennent tous deux à en flux boîtes au niveau des blocs qui participent dans le même bloc de mise en forme contexte
• pas de boîtes de ligne, pas de jeu, aucun remplissage et aucune frontière les séparent
• les deux appartiennent à la boîte verticalement adjacent bords

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

Answer 2

Les marges, contrairement au rembourrage (qui couvre une largeur spécifique) est un "faites ceci comme une distance minimale".

Il ne mettra pas cette distance à tous les éléments.

Comme vous pouvez le voir, le entrer en contact marge inférieure de bloc est marged à la boîte d'entrée. C'est la marge active ici. L'autre marge, marge supérieure de l'entrée, n'est pas active, car elle est plus petite et n'atteint pas un élément de bloc où elle repousserait en réalité l'élément. Les 2 marges se chevauchent et ne se touchent pas mutuellement.

Answer 3

J'avais posté une question similaire, ma réponse à: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

Ajouter une vision claire balise div entre les deux objets