CSS邊距重疊問題

Question

請參閱我的代碼，我不明白爲什麼這些div的邊距重疊。

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

的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

我認爲這是一個摺疊的餘量。 只考慮第一個元素底部和第二個元素底部之間的最大邊距。

兩段之間沒有太多空間是很正常的，例如，

您無法避免使用兩個相鄰元素，因此您必須放大或縮小較大的邊距。

編輯：比照。 W3C

兩個邊距相鄰當且僅當：

• 都屬於參與同一個塊格式化上下文
• 沒有行框在流動塊級盒，無間隙，沒有填充和無邊框它們分開
• 同屬垂直相鄰框緣

所以沒有崩潰與float它把元素流出。

Answer 2

與填充（填充特定寬度）相反，邊距是「將其作爲最小距離」。

它不會把這個距離放到所有元素上。

正如你所看到的，取得聯繫塊的底部邊距被壓縮到輸入框。這是在這裏活躍的邊際。 另一個邊距輸入的上邊距不起作用，因爲它更小並且不會到達塊元素，實際上它會將元素推回。這兩個邊界重疊並且不相互影響。

Answer 3

我已經發布了類似的問題，我在回答： http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

添加兩個對象