為什麼我的 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中文網其他相關文章！