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

添加两个对象