Folding of margin (margin) in the CSS frame model

Recently, I made a project, and it was a long time to struggle with a small CSS problem-the problem of outer margin folding. Today, it is rare to be idle. I have studied this problem and found that I have learned a lot. So I can write a blog article to better remember it!

　　Outer margin foldThe two or more adjacent margins (margin) are merged into one margin in the vertical direction.

　　Trigger Condition:

1. Adjacent, notNon-empty content,Padding,BorderOrClearSeparatedMargin features.The non-empty content indicates that the element is either a sibling or parent-child relationship.
2. All these margin elements are in a normal stream, that is, non-floating elements and non-locating elements.

　　Calculation of vertical outer margin merge

　　1) the margin values involved in the folding are all positive values: Take the value with a large margin value as the final margin value.

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div><div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

:
　　　　　　

 

2). The margin values involved in the folding process are all negative values: the absolute values of the values are large, and the values are shifted from 0 to negative.

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div><div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

:
　　　　　

　　

3). The margin involved in the folding has a positive value and a negative value: first, extract the largest absolute value in the negative margin, and then add the largest margin in the positive margin value.

<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div><div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

:
　　　　　　

4) adjacent margin should be involved in the calculation together, and should not be calculated step by step

Note that the adjacent elements are not necessarily non-sibling nodes, and the parent and child nodes can also be adjacent, even if they are not sibling nodes.

In addition, adjacent margin values must be involved in the calculation, but do not perform step-by-step calculation.

<div style="margin:50px 0; background-color:green; width:50px;">    <div style="margin:-60px 0;">           <div style="margin:150px 0;">A</div>    </div></div><div style="margin:-100px 0; background-color:green; width:50px;">    <div style="margin:-120px 0;">           <div style="margin:200px 0;">B</div>    </div></div>

Incorrect calculation method: Calculate the margin between A and B, calculate the folding of A and its parent elements, and then fold the parent element of its parent element. After this value is calculated, it should be 90px. According to this method, it is calculated that B is 80px. Then, A and B are folded, and margin is 90px.

Note that multiple margin adjacent values are folded into one margin. Therefore, all related values should be taken for calculation, rather than separated and calculated step by step.

In the preceding example, the margin generated by the margin folding between A and B is the result of six adjacent margin folds. Divide the margin value into two groups:

Positive Value: 50px, 150px, 200px

Negative value:-60px,-100px,-120px

According to the calculation rule with positive and negative values, the maximum value of a positive value is 200px, and the absolute value of a negative value is-120px. Therefore, the final collapsed margin value should be 200 + (-120) = 80px.

　　

5). The margin of floating elements, inline-block elements, and absolute positioning elements are not folded with the margin of other elements in the vertical direction.

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div><div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">    <div style="margin-top:50px; background-color:gold;">B</div></div>

:
　　　　　　

6). An element of block-level formatting context 1 is created, and margin folding does not occur with its child elements.

Take the "overflow: hidden" element as an example:

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">    <div style="margin-top:50px; background-color:gold;">B</div></div>

If B and its "overflow: hidden" contain blocks are margin folded, the golden bars should be located at the top of the green blocks. Otherwise, no.

:
　　　　

7). When the margin-bottom and margin-top of the element are adjacent to each other

Its own margin-bottom and margin-top are adjacent. They can only be empty content, and border and padding in the vertical direction are 0.

<div style="border:1px solid red; width:100px;">    <div style="margin-top: 100px;margin-bottom: 50px;"></div></div>

 

After the above Code is run, we will show the square of the red border. The width and height of the box should be 100px, and the height should not be 150px.

: