为什么我的 Div 元素边距重叠以及如何修复它？

div 元素中的边距重叠

问题：

为什么 div 的边距是我的代码中的元素重叠，导致元素聚集在一起？

代码：

<code class="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;}</code>

<code class="html"><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></code>

答案：

边缘重叠可能是由于一种称为“边缘崩溃”的现象造成的。当一个元素的下边距和相邻元素的上边距组合形成一个更大的边距时，就会发生这种情况。

在您的代码中，.social div 的下边距和 .social div 的上边距.contact div 正在折叠，导致元素看起来太靠近。

根据 W3C，如果两个边距满足以下条件，则它们会折叠：

• 两个边距都属于块在同一块格式上下文中。
• 没有线框、间隙、填充或边框分隔边距。
• 两个边距都位于垂直相邻的框边缘。

由于代码中的边距满足这些条件，它们将会折叠。

解决方案：

有几种方法可以解决此问题：

• 使用内边距代替边距。内边距不会折叠，因此使用它代替间距元素的边距可以防止出现此问题。
• 将clear:both 添加到父容器。 这将创建一个新的块格式上下文，防止边距折叠。
• 使用浮动。 浮动元素从正常流中取出，这会阻止其边距免于崩溃。

以上是为什么我的 Div 元素边距重叠以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！