Div が重複しているのはなぜですか?マージン崩壊の理解と解決

マージンの崩壊: Div レイアウトの重複を理解して解決する

複数の div 要素を含むレイアウトをデザインする場合、マージンの概念を理解することが重要です不要なマージンの重なりを避けるために折りたたんでください。マージン崩壊は、隣接する要素のマージンが結合するときに発生する CSS の動作で、それらの間のマージン スペースの合計が効果的に増加します。

マージン崩壊の原因

特定のケースでは、マージンの重なりは、次の CSS ルールの組み合わせが原因である可能性があります:

<code class="css">#header .social {margin-top: 50px;}
#header .search {margin: 10px 0 0;}</code>

これらのルールにより、検索 div のマージンがその下のソーシャル div のマージンと重なってしまう状況が作成されます。 .

解決策

このシナリオでマージンの崩壊を回避するには、次の 2 つのアプローチが考えられます:

• フロートを使用する: ソーシャル div と検索 div をフローティングすることで、ドキュメントの通常のフローからそれらを削除し、マージンの崩壊を防ぎます。ただし、これは他の方法でレイアウトに影響を与える可能性があるため、すべての状況に適しているとは限りません。
• 余白の調整: あるいは、div の余白を調整して、div の余白を調整することもできます。重なりません。たとえば、検索 div の上部マージンを減らしたり、ソーシャル div の下部マージンを増やしたりできます。

その他の考慮事項

次のことが重要です。マージンの崩壊は、垂直方向に隣接する要素間で垂直方向にも発生する可能性があることに注意してください。さらに、「ブロック フォーマット コンテキスト」の概念を理解することは、マージンの崩壊を制御するために重要です。ブロックの書式設定コンテキストを操作することで、余白の計算方法に影響を与え、意図しない重複を避けることができます。

以上がDiv が重複しているのはなぜですか?マージン崩壊の理解と解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。