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>

答え:

マージンの重なりは、「マージン崩壊」として知られる現象によるものと考えられます。これは、1 つの要素の下マージンと隣接する要素の上マージンが結合して単一の大きなマージンを形成する場合に発生します。

コードでは、.social div の下マージンと、.social div の上マージンが.contact div が折りたたまれているため、要素が近づきすぎて表示されます。

W3C によれば、次の基準を満たす場合、2 つのマージンが折りたたまれます:

• 両方のマージンがブロックに属している同じブロック書式設定コンテキスト内にあります。
• マージンを区切る行ボックス、クリアランス、パディング、境界線はありません。
• 両方のマージンは垂直方向に隣接するボックスの端にあります。

コード内の余白はこれらの基準を満たしているため、崩れてしまいます。

解決策:

この問題を解決するには、いくつかの方法があります:

• マージンの代わりにパディングを使用します。 パディングは折りたたまれないため、要素の間隔を空けるためにマージンの代わりにパディングを使用すると、問題が回避されます。
• clear:both を親コンテナ。 これにより、新しいブロック書式設定コンテキストが作成され、マージンが崩れるのを防ぎます。
• フロートを使用します。 フローティング要素は通常のフローから削除され、マージンが妨げられます。

以上がDiv 要素のマージンが重なっているのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。