Warum überlappen sich die Ränder meiner Div-Elemente und wie kann ich das beheben?

Überlappende Ränder in Div-Elementen

Frage:

Warum sind die Ränder des div Elemente in meinem Code überlappen sich, wodurch sich die Elemente anhäufen?

Code:

<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>

Antwort:

Die überlappenden Ränder sind wahrscheinlich auf ein Phänomen zurückzuführen, das als „Margenkollaps“ bekannt ist. Dies geschieht, wenn der untere Rand eines Elements und der obere Rand eines benachbarten Elements zusammen einen einzigen, größeren Rand bilden.

In Ihrem Code sind der untere Rand des .social-Div und der obere Rand des .contact div kollabieren, wodurch die Elemente zu nahe beieinander erscheinen.

Laut W3C kollabieren zwei Ränder, wenn sie die folgenden Kriterien erfüllen:

• Beide Ränder gehören zu Blöcken im gleichen Blockformatierungskontext.
• Keine Zeilenrahmen, Abstände, Abstände oder Ränder trennen die Ränder.
• Beide Ränder befinden sich an vertikal angrenzenden Rahmenrändern.

Da die Ränder in Ihrem Code diese Kriterien erfüllen, werden sie reduziert.

Lösung:

Es gibt mehrere Möglichkeiten, dieses Problem zu lösen:

• Verwenden Sie Polsterung anstelle von Rändern. Polsterung kollabiert nicht, sodass die Verwendung von Polsterung anstelle von Rändern für den Abstand von Elementen das Problem verhindert.
• Fügen Sie „clear:both“ zum hinzu übergeordneter Container. Dadurch wird ein neuer Blockformatierungskontext erstellt, der verhindert, dass die Ränder zusammenfallen.
• Verwenden Sie Floats. Floating-Elemente werden aus dem normalen Fluss genommen, wodurch ihre Ränder verhindert werden vor dem Zusammenbruch.

Das obige ist der detaillierte Inhalt vonWarum überlappen sich die Ränder meiner Div-Elemente und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!