Solve the problem of margin collapse

Margin collapse, also known as margin merging, is when the margins of two block-level elements that are adjacent (siblings or parent-child) in normal flow are combined to form a single margin, but only the upper and lower margins collapse, not the left and right margins.

The first is the father-son relationship

<div class="father1"> <div class="son1"> Child </div> </div>Copy the code

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

Copy the code

Add margin-top to the child element

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

Copy the code

Comment out the child element’s margin-top and add margin-top to the parent element

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

Copy the code

Margin-top = margin-top; margin-top = margin-top; margin-top = margin-top; margin-top = margin-top; margin-top = 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;
        }

Copy the code

The second kind: adjacent brother relationship

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

Copy the code

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

Copy the code

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

Copy the code

What is the calculation between the margins when the margins collapse? If both numbers are positive, take the larger value. 2. If both numbers are negative, take the larger value 3. One plus one minus, take the sum of two values