CSS in detail about margin does not overlap the text code

margin overlap

Excerpt from the css2.1 specification Chinese version

In CSS, adjacent margin of two or more boxes (possibly but not necessarily brothers) is combined into a margin. Margin is called overlapping in this way (collapse)
, the resulting union margin is called the overlapping margin.

Calculation rules for margin overlap

Excerpt from the css2.1 specification Chinese version

When two or more margin merges, the resulting margin width is the maximum value in the consolidated margin width. As for negative margin, the maximum value of the absolute value of the negative adjacent margin is subtracted from the maximum of the positive adjacent margin. If there is no positive margin, subtract the maximum of the absolute value of the adjacent margin with 0

What is the adjacent margin

Excerpt from the css2.1 specification Chinese version
Two margin is adjacent, if and only if:

• is a block-level box within a stream, in the same block formatting context.

• No row box (line box), no voids, no padding and no border to separate them (note, therefore some 0 height box)

• are vertical adjacent box edges (vertically-adjacent box edges), which is from one of the following pairs:
  1. The top margin of a box and its first stream is the child's top margin
  2. A box of bottom Margin and the top margin
  3 of the sibling (its next in-flow following sibling) in the next stream. The last stream is the child's bottom margin and its parent's bottom margin, If the parent's height is calculated as ' auto '
  4. A box of top and bottom margin, the box does not establish a new block formatting context and the computed value of Min-height is 0,height calculated as 0 or ' auto ', and there is no stream child

If any part of a margin is adjacent to another margin, it is considered to be adjacent to that margin and is a merge (collapsed) margin.

Analyze each condition in detail 1. All belong to the stream block-level box, in the same block formatting context.

What is an in-stream element? If an element is floating, absolutely positioned, or is a root element, then it is an out-of-flow element. If an element is not out of the flow, it is called an in-stream element. The
Stream inner block-level box is a box generated by block-level elements in the stream.

Conclusion 1: The box margin of the root element does not overlap (cause: The root element is a block-level box, but not an element within the flow).

For a