📌 利益の重複(Margin Collapsing)

隣接ブロック要素の上下縁が重なる現象

が重なる利益では、大きな値で重なる.

<div class="first"></div>
<div class="second"></div>

div{
  width:100px;
  height:100px;
  border:1px solid black;
}

.first{
   margin-bottom:30px; 
}

.second{
  margin-top:60px;
}

/* 마진 값이 높은 쪽의 마진만 적용됩니다. */

これは意図的な現象で、ユーザーは便利ですが、親と子供の間にも利益が重なるため、混乱する可能性があります.親と子供の間の利益が重なるのは何なのか、他に何か解決策があるのだろうか.

    <div class="parents">
        <div class="children">가</div>
        <div class="children">나</div>
    </div>

親の中に子供が二人いると言ってください.

        body {
            background-color: lightgray;
        }

        .parents {
            background-color: yellowgreen;
            width: 300px;
            margin: 0 auto;
        }

        .children {
            width: 200px;
            height: 200px;
            background-color: dodgerblue;
            color: rgba(255,255,255,0.2);
            font-size: 50px;
            text-align: center;
            margin: 50px;
        }

私たちが知っている利益の重ね合わせ現象を考えてみると、予想された結果はこうです.

しかし、親と子の間にも利益が重なるため、利益が発生し、結果は以下のようになる.

では、理想的な状態でテキストを追加しましょう.

    <div class="parents">
        텍스트
        <div class="children">가</div>
        텍스트
        <div class="children">나</div>
        텍스트
    </div>

文字を付けると親と子が完全に離れてしまうので利益が重なることはありません!同様の方法では、親要素にpadding値やborder値を追加してオーバーラップを解消することができますが、解決策というより、利益オーバーラップが発生しない条件に近いです!実際に空間を占有しているので、意図したデザインとは疎遠になります.

🔥 どんな解決策がありますか。

display: inline-block;

        .children {
            width: 200px;
            height: 200px;
            background-color: dodgerblue;
            color: rgba(255,255,255,0.2);
            font-size: 50px;
            text-align: center;
            margin: 50px;
            display: inline-block;
            /* 이러면 해결이 되지만 가운데는 100px된다 */
        }

ブロック要素間しか発生しないので、サブ要素inline blockを与えると上下の余白が発生しますが、中間の余白が重なると消え、100 pxの余白が発生します!

親要素overflow:hidden;を入れます!

        .parents {
            background-color: yellowgreen;
            width: 300px;
            margin: 0 auto;
            overflow: hidden;
            /* 이게 제일 좋은방법 */
        }

参照ビデオ:麻疹が重なる現象!(幸せ…)