html - 为什么我的 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>+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>

Answer 1

我认为这是一个崩溃的 margin 。仅考虑第一个元素的底部和第二个元素的顶部之间的最大边距。

例如，两段之间没有太多空间是很正常的。

您无法避免两个相邻元素出现这种情况，因此您必须扩大或缩小较大的边距。

编辑:比照。 W3C

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges

因此不会使用 float 将元素从流中取出。