为什么我的div边距重叠，如何解决？

Question

我不明白为什么这些div的边距重叠

.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;}


<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>[phone]</span>

    </div><!-- contact -->

    <div class="search">

        <form method="post" action="">

            <input type="text" value="" name="s" gtbfieldid="28">

        </form>

    </div><!-- search -->

</div>

Answer 1

我认为这是倒闭的利润。仅考虑第一个元素的底部和第二个元素的顶部之间的最大边距。

例如，在两个段落之间没有太多的间隔是很正常的。

编辑：比照。W3C

当且仅当以下情况，两个边距相邻：

1. 两者都属于流内块级框，它们参与相同的块格式上下文
2. 没有线框，没有间隙，没有填充和没有边框将它们分开
3. 都属于垂直邻的盒子边缘因此，不会发生折叠，float从而使元素脱离流程。