利益の重複現象、Margin崩壊

説明する前にソースコードを見てください.

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

      .first {
        margin-bottom: 30px;
        background-color: red;
      }

      .second {
        margin-top: 60px;
        background-color: blue;
      }
</style>

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

出力結果から、クラス名.firstおよび.secondのwidthは100 pxであり、heightは100 pxの正方形の<div>である..first配置margin-bottomは30 px、.second配置margin-topは60 pxである.


しかし、変なところを見ましたか?.secondのmargin-topが.firstのmargin-bottomと重なっているのが見えるはずです.
これを마진 겹침 현상, Margin collapsingといいます.
定義すると、隣接する2つのBlock level Elementsの間にmargin-topまたはmargin-bottomの空間がある場合、より高い値のmarginが適用されます.
また、마진 겹침 현상が発生した場合、親要因に子供要因が存在する場合、子供要因のmargin-topまたはmargin-bottomの値は親の身長に影響を及ぼさない.

<style>
      .parent {
        height: 200px;
        background-color: yellow;
      }

      .child {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background-color: red;
      }
</style>

<div class="parent">
      <div class="child"></div>
</div>

その結果、下図に示すように.parentの領域は現在.childを囲んでおり、.childのmargin-topの状態から見ると.parentの領域を超えている.


この問題を解決するには、마진 겹침 현상を解決するために3つの解決方法があり、応用されている.
説明に添付された説明は李鍾燦（イ・ジョンチャン）講師の「束キャンプ」でコードされたガーナダシリーズの「連結利益」動画。を参照している.

親要素にoverflow:hidden属性値を適用します.李鍾燦(イ・ジョンチャン)講師が行ったYouTubeチャンネル「束営」での動画を見れば役に立つだろう.その後、overflow:hiddenがどのように動作を解決するかのビデオを整理して投稿にアップロードします.

親要因にはdisplay: inline-block値を適用します.

親要素にはborderまたはpaddingの値が適用される.paddingとborderの領域はmargin boxの領域より内側なので境界線を与えることで解決する方法です.しかし、この方法は親要素のwidthまたはheightの大きさに1を加えるため、設計時に所望の結果が得られない可能性がある.

**講師によると、どの解決策にも良い場合があり、不適切な場合もあるという.だから彼は、状況に応じて選択すれば、良い解決方法になると言った.
私の考え💭

当初は上下marginが適用されていた場合、方向が一致したらどうですか?考えたことがある.마진 겹침 현상の主な原因はBlock level Elementsの間の上下marginが重なって起こることなので、重ならないようにすればいいのではないでしょうか.

整理が終わったら

うん.何か不足があるようです.自分で話しながら説明したいのですが、基準があまりよくなくて、いつも結末が悪いような気がします.
先週鐘燦先生が教えてくれたのですが、その時は2人の子供の要素があったので、今は1つの例で言えば、少し適用されないようで、私自身はまた勉強して、理解しようと努力しています.
さらに、好奇心から「束キャンプ場」の利潤合併動画を参考にしましたが、詳しいCSS説明に改めて感嘆して一日を終えました.😮
今回の連結利益の解決策では、overflow:hiddenの動作原理を、ビームキャンプのビデオを参考に整理しなければならない.