Margini CSS Sovrapposizione Problema

Question

Vedere il mio codice, non capisco perché i margini di questi div si sovrappongono.

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

Il 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

Penso che sia un margine crollato. Viene preso in considerazione solo il margine più grande tra la parte inferiore del primo elemento e la parte superiore del secondo.

È abbastanza normale non avere troppo spazio tra due paragrafi es.

Non è possibile evitarlo con due elementi adiacenti, quindi è necessario ingrandire o ridurre il margine più grande.

MODIFICA: cfr. W3C

due margini sono adiacenti se e solo se:

• entrambi appartengono a caselle a livello di blocco nel flusso che partecipano al contesto di formattazione stesso blocco
• nessun scatole di linea, senza gioco, senza imbottitura e senza bordo separarli
• entrambi appartengono alla scatola verticalmente adiacente bordi

Quindi non c'è il collasso con float che estrae l'elemento dal flusso.

Answer 2

Margini, al contrario di padding (che supporta una larghezza specifica) è un "fare questo come una distanza minima".

Non metterà quella distanza a tutti gli elementi.

Come si può vedere, lo si mette in contatto il margine inferiore del blocco viene trascinato nella casella di input. Questo è il margine attivo qui. L'altro margine, margine superiore dall'input, non è attivo poiché è più piccolo e non raggiunge un elemento di blocco in cui sarebbe effettivamente respingere l'elemento. I 2 margini si sovrappongono e non si influenzano a vicenda.

Answer 3

avevo postato una domanda simile, per la mia risposta a: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

Aggiungi un tag div chiara tra i due oggetti