Superposición de márgenes CSS Problema

Question

Consulte mi código, no entiendo por qué los márgenes de estos divs se superponen.

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

El 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

Creo que es un margen colapsado. Solo se tiene en cuenta el margen más grande entre la parte inferior del primer elemento y la parte superior del segundo.

Es bastante normal no tener demasiado espacio entre dos párrafos, por ejemplo.

No puede evitar eso con dos elementos adyacentes, por lo que tiene que aumentar o reducir el margen más grande.

EDITAR: cf. W3C

dos márgenes son adyacentes si y sólo si:

• ambos pertenecen a las cajas a nivel de bloque en el flujo que participan en el contexto de formato mismo bloque
• no hay cajas de línea, sin distancia, sin relleno y sin borde separados
• ambos pertenecen a la caja verticalmente adyacente bordes

No hay ningún colapso con float que saca el elemento del flujo.

Answer 2

Márgenes, a diferencia del relleno (que rellena un ancho específico) es un "haz esto como una distancia mínima".

No pondrá esa distancia a todos los elementos.

Como puede ver, el ponerse en contacto Margen inferior del bloque está marcado en el cuadro de entrada. Ese es el margen activo aquí. El otro margen, el margen superior de la entrada, no está en vigor, ya que es más pequeño y no llega a un elemento de bloque donde en realidad retrocede el elemento. Los 2 márgenes se superponen y no se afectan entre sí.

Answer 3

que había publicado una pregunta similar, mi respuesta a: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

Añadir una etiqueta div clara entre los dos objetos