為什麼我的 Div 元素邊距重疊以及如何修復它？-css教學-PHP中文網

為什麼我的 Div 元素邊距重疊以及如何修復它？

Patricia Arquette

發布： 2024-10-26 07:34:30

原創

812 人瀏覽過

Why are My Div Element Margins Overlapping and How Can I Fix It?

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>

登入後複製

代碼：

答案：

邊緣重疊可能是由於一種稱為「重疊邊緣崩潰」的現象造成的。當一個元素的下邊距和相鄰元素的上邊距組合形成一個更大的邊距時，就會發生這種情況。