ネストされた Div マージンが重なっているのはなぜですか?

ネストされた Div でのマージンの重複のトラブルシューティング

重複の問題の調査

提示されたコード スニペットには、次のものがあるようです。ネストされた div のマージンが重なって、予期しない間隔が生じる問題。原因を理解するために HTML と CSS を調べてみましょう。

HTML 構造

HTML 構造には、3 つの子 div を含むクラス「alignright」を持つ親 div が含まれます。 「ソーシャル」「コンタクト」「検索」。これらの子 div に適用されるマージンが重複の原因となっています。

CSS 宣言

マージンを管理する CSS 宣言は次のとおりです:

<code class="css">#header .social {margin-top: 50px;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .search {margin: 10px 0 0;}</code>

犯人の特定: 余白の崩壊

余白の重なりは、「余白崩壊」現象の結果です。垂直方向に隣接する 2 つのマージンがインラインまたはブロック レベルの要素に属している場合、大きい方のマージンは折りたたまれ、小さい方のマージンは無視されます。この場合、「contact」 div と「search」 div のマージンを縮小しているのは、「social」 div の大きい方のマージン (50px) です。

問題の解決

マージンの崩れを防ぐには、いくつかのアプローチを検討できます。

1. クリアランスを使用する: 導入する要素間に
   タグまたは CSS クリアフィックス テクニックを追加します。
2. フロートまたは絶対配置を使用する: フロートまたは絶対配置を使用して、通常のフローから要素を削除します。これにより、マージンが他の要素で崩れないようになります。

代替オプション

特定の状況では、特定の間隔を実現するために意図的にマージンを折りたたむことができます。効果。追加のスペースを作成するには、負のマージンを使用することを検討してください。ただし、負のマージンを使用する場合は、予測できない結果が生じる可能性があるため注意してください。

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