マージン崩壊の問題を解決する

マージンの崩壊はマージンマージとも呼ばれ、通常のフロー（兄弟または親子関係）内の2つの隣接するブロックレベル要素のマージンを単一のマージンに結合しますが、上部マージンと下部マージンのみを指します。崩壊すると、この問題は左右の余白では発生しません。

最初のタイプ：父と息子の関係

<div class="father1">
    <div class="son1">子元素1</div>
</div>

 .father1{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .son1{
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: deepskyblue;
        }

子要素にmargin-topを追加します

 .son1{
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: deepskyblue;
            margin-top: 50px;
        }

子要素のmargin-topをコメントアウトし、親要素にmargin-topを追加します

 .father1{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 50px;
        }

親要素と子要素にmargin-topを追加すると、サイズが異なります

 .father1{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 50px;
        }
        .son1{
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: deepskyblue;
            margin-top: 100px;
        }

2番目のタイプ：隣接する兄弟関係

<div class="father1"></div>
<div class="father2"></div>

 		.father1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .father2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

		.father1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 100px;
        }
        .father2{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 50px;
        }

マージンが折りたたまれている場合、マージンはどのように計算されますか？
1.両方とも正の数で、大きい値を取ります
2.両方とも負の数で、大きい絶対値を取ります
3. 1つの正と1つの負、2つの合計を取ります