BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る

2022-02-03 20:18:33

先日、CSS関連の知識を見直し、その効果確認と他の方の参考になればと思い、CSSの定番であるマージンオーバーラップの問題をまとめてみましたので、抜けがある部分についてアドバイスをいただければと思います。

問題点：CSSレイアウトを使用していると、下図のように兄弟ノードや親子ノードの上下の余白が重なってしまうことがあります。 

    <style>
        .out {
            width: 100%;
            background-color: pink;
        }

        .out>div {
            height: 100px;
            width: 100%;
            background-color: rgb(223, 136, 23);
            margin: 5px 0 10px;
        }
    </style>
    <section class="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </section>

セクション全体の高さを見ると、実際には345pxであるべきですが、親と兄弟のマージンが重なっているため、高さは320pxになっています。では、実際にどのように修正すればよいのでしょうか。
BFC（Block Formatting Context throughout）を作成することでこの問題を解決することができるので、まずはBFCの原理を明らかにします。

BFC内の要素は互いに影響を与えず、外部の要素から比較的独立した閉じた領域である。
隣接するBFC間で垂直方向の余白の重なりが発生しない、つまり、要素の外側の余白が重ならないようにしたい場合にBFC領域を作成する。
(b) BFC領域は、フローティング要素のボックスと重ならない。
の場合、BFCは高さ計算に浮動要素をカウントする。
BFCを作成するにはどうすればよいですか？
1. overflow属性を表示しないように設定する。
2. floatがnoneにならないようにする。
3.位置の値が静的または相対的でないこと。
4. display属性がtableの場合。 

    <style>
        .out {
            width: 100%;
            background-color: pink;
            overflow: hidden;
        }

        .out>div {
            height: 100px;
            width: 100%;
            background-color: rgb(223, 136, 23);
            margin: 5px 0 10px;
            /* overflow: hidden; */
            float: left;
        }
    </style>
    <section class="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </section>

再度、セクションの高さを見ると、高さが345pxに復元されており、BFCがフローティング子要素の高さを含めて高さを計算していることが証明されています。

CSSマージンの重なりと解決策については、この記事がすべてです。CSSの余白の重なりについては、過去の記事を検索していただくか、引き続き以下の記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します