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，如果两个边距满足以下条件，则它们会折叠：
由于代码中的边距满足这些条件，它们将会折叠。
解决方案：
有几种方法可以解决此问题：
以上是为什么我的 Div 元素边距重叠以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！
