Note: css-margin does not overlap, and css margin overlaps.

Note: css-margin does not overlap, and css margin overlaps.
Margin overlaps

From the Chinese version of css2.1 specifications

In CSS, two or more adjacent margin boxes (possibly but not necessarily sibling) are combined into a margin. Margin is called collapse in this way)
The resulting margin is called an overlapping margin.

Calculation rules with overlapping margin

From the Chinese version of css2.1 specifications

When two or more margin values are merged, the resulting margin width is the maximum value in the merged margin width. As for negative margin, the absolute value of negative adjacent margin is subtracted from the maximum value of positive adjacent margin. If there is no positive margin, 0 is used to subtract the maximum value of the absolute value of the adjacent margin.

What is adjacent margin?

From the Chinese version of css2.1 specifications
Two margin values are adjacent when and only when:

• Both belong to the block-level box in the stream and are in the same block formatting context.
• No line box, no space, no padding, and no border to separate them (note, so some 0-height line boxes)
• They all belong to vertically-adjacent box edges, that is, from one of the following:
  1. The top margin of a box and the top margin of its first sub-stream
  2. The bottom margin of a box and the top margin of its next in-flow following sibling
  3. The bottom margin of the child of the last stream and its parent bottom margin. If the height of the parent is 'auto'
  4. the top and bottom margin of a box. The box does not have a new block formatting context. The min-height value is 0, and the height value is 0 or 'auto ', and no streaming sublevel

If any part of a margin is adjacent to another margin, it is considered adjacent to that margin, which is collapsed margin.

Specific analysis of each condition 1. It belongs to the block-level box in the stream and is in the same block formatting context.

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

Conclusion 1: The Box margin of the root element does not overlap (cause: although the root element is a block-level box, it is not an element in the stream ).

For example