CSS margin Merge (collapse/margin out of Bounds)

Original

The original Book of Jane: https://www.jianshu.com/p/5f18f12cd162

Outline

1, what is the margin merger? (Folding margin)
2, the impact of the outside distance
3, the result of folding
4, Causes of folding
5. The appearance of the situation

1, what is the margin merger? (Folding margin)

Margin merging means that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur. The left and right margins do not merge.
In CSS, the margins of the adjacent two boxes (which may be sibling or ancestor relationships) can be combined into a single margin. This way of merging the margins is known as folding, and thus the outer margin that is combined is called the folded margin.
Note: Margin merges occur only in the vertical margins of a block box in a normal document flow. Margins between inline boxes, floating boxes, or absolute positioning are not merged.

2, the impact of the outside distance

The impact of the margin has a lot of statements, there is said margin cross-border, there is also said to be outside the collapse, but in fact, is the performance of the outer margin merger.

3, the result of folding

When two adjacent margins are positive, the collapsed result is a larger value between them.
When two adjacent margins are negative, the collapsed result is a larger value of both absolute values.
Two outer margin a positive and negative, the result of folding is the sum of the two.

4, Causes of folding

According to the code, two margin is contiguous and must meet the following conditions
4.1, must be in the regular document flow (non-float and absolute positioning) block-level box, and in the same BFC.
4.2, No Line box, no gap (clearance, below), no padding and border will separate them
4.3, all belong to the vertical direction of the adjacent margin, can be any one of the following situations:
A: The margin-top of the element and the margin-top of the child elements of its first regular document stream
B: The margin-bottom of the element and the margin-top of the sibling element of its next regular document stream
C:height the Margin-bottom of the element that is auto and the child element of its last regular document Stream Margin-bottom
D: The height is 0 and the minimum height is also 0, the child elements of the regular document stream are not included, and the Margin-top and margin-bottom of the elements of the new BFC are not created by themselves

5, the occurrence of the situation 5.1, two different div of the upper and lower margin merge

5.2, inside and outside the div between the Outer space merge (sub-element out of bounds or margin out of bounds)
<!--    This is also referred to as child element cross-border or margin cross    margin (margin-top of the first child element and margin-bottom of the Last child element)       Take the margin-top of the first child element as an example: when the    parent element does not have a border border, the Margin-top value of the first child element is set, and the Margin-top value is added to the parent element-->
5.3. Multiple sub-element margin merges
<!--    only when the width of the current one child is 0, in other words, the previous child element does not have the means to limit the margin of the subsequent child to the point at which this occurs (of course, the parent cannot limit the child's margin bounds at all)-->< html>
Reference website
Http://www.w3school.com.cn/css/css_margin_collapsing.asp
Https://www.cnblogs.com/wangjiaojiao/p/4659429.html
Https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
CSS margin Merge (collapse/margin out of Bounds)