CSS マージンの重複と解決策の探索の詳細な説明

最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整理してまとめました。目的は、レビューの効果をテストし、他の人に役立つことを願っています。漏れがある場合は、フロントエンドのベテランにアドバイスを求めたいと思います。

質問: CSSレイアウトを使用すると、次の図に示すように、兄弟ノードまたは親子ノードによって設定された上部と下部の余白が重なり合うことがわかります。

    <スタイル>
        。外 {
            幅: 100%;
            背景色: ピンク;
        }

        .out>div {
            高さ: 100px;
            幅: 100%;
            背景色: rgb(223, 136, 23);
            マージン: 5px 0 10px;
        }
    </スタイル>
    <セクションクラス="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </セクション>

セクション全体の高さを確認すると、実際には 345px になるはずですが、親と子、兄弟の余白が重なり合っているため、高さは 320px になっていることがわかります。では、実際のアプリケーションでこの問題をどのように解決するのでしょうか?
この問題は、BFC (Full Block Formatting Context) を作成することで解決できます。まず、BFC の原理を明確にしましょう。

BFC 内の要素は外部の要素に影響を与えず、比較的独立した閉じた領域です。
隣接する BFC 間で垂直マージンの重なりはありません。つまり、要素のマージンが重ならないようにするには、BFC 領域を作成する必要があります。
BFC 領域はフローティング要素のボックスと重なりません。
BFC の高さを計算する際には、浮遊要素も考慮されます。
ブロック書式設定コンテキストを作成するにはどうすればよいですか?
1. オーバーフロープロパティを非表示に設定します。
2. float が none ではない。
3. 位置の値は静的でも相対的でもない。
4. 表示属性がテーブルの場合

    <スタイル>
        。外 {
            幅: 100%;
            背景色: ピンク;
            オーバーフロー: 非表示;
        }

        .out>div {
            高さ: 100px;
            幅: 100%;
            背景色: rgb(223, 136, 23);
            マージン: 5px 0 10px;
            /* オーバーフロー: 非表示; */
            フロート: 左;
        }
    </スタイル>
    <セクションクラス="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </セクション>

セクションの高さを再度確認すると、高さが 345 ピクセルに戻っていることがわかります。これは、BFC が高さを計算するときに、フローティング子要素の高さも考慮されていることを証明しています。

CSS マージンの重複の詳細な説明と解決策の探求に関するこの記事はこれで終わりです。CSS マージンの重複に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。