CSS边距重叠问题
请参阅我的代码，我不明白为什么这些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;}
我认为这是一个崩溃的边缘。 只考虑第一个元素的底部和第二个元素的顶部之间的最大余量。
两段之间没有太多空间是很正常的，例如，
你不能避免与两个相邻的元素，所以你必须放大或缩小更大的余量。
编辑：比较 W3C
两条边界相邻，当且仅当：
- 都属于参与相同块格式上下文的stream入块级别框
- 没有线框，没有清除，没有填充和没有边界分开他们
- 都属于垂直相邻的盒子边缘
所以，不会有float的元素从stream动中消失。
与填充（填充特定宽度）相反，边距是“做为最小距离”。
它不会把这个距离放在所有元素上。
正如你所看到的那样， 获取联系块的下边距被加到input框中。 这是在这里活跃的边际。 另一个边距，即input的上边距不起作用，因为它更小，并且不会到达实际推回元素的块元素。 这两个边界重叠，并不相互影响。
我发表了一个类似的问题，我的回答是： http : //www.w3.org/TR/CSS21/box.html#collapsing-margins
在两个对象之间添加一个清晰的div标签
