Definition and calculation rules of margin overlap

Margin overlap

Excerpted from the Chinese version of css2.1 specification

In CSS, the adjacent margins of two or more boxes (may but not necessarily be brothers) will are combined into a margin. The combination of margins in this way is called collapse
, and the resulting combined margin is called overlapping margin.

Margin overlapping calculation rules

Excerpted from the Chinese version of css2.1 specification

When two or more margins are merged, the margin generated The width is the maximum value of the combined margin widths. As for the negative margin, subtract the maximum absolute value of the negative adjacent margin from the maximum value of the positive adjacent margin. If there is no positive margin, subtract the maximum absolute value of adjacent margins from 0

What is adjacent margin

Excerpted from the Chinese version of CSS2.1 specification
Two margins are adjacent if and only if:

• both belong to the in-stream block-level box and are in the same block formatting context.

• No line boxes, no gaps, no padding and no borders to separate them (note, therefore some 0 height line boxes)

• all belong to vertically-adjacent box edges (vertically-adjacent box edges), that is, from one of the following pairs:
  1. The top margin of a box and the top margin of its first in-flow child
  2. The bottom margin of a box and the top margin of its next in-flow following sibling
  3. The bottom margin of the last in-flow child and its parent The bottom margin, if the calculated value of the parent's height is 'auto'
  4. The top and bottom margin of a box, the box does not establish a new block formatting context and the calculated value of min-height is 0, The calculated value of height is 0 or 'auto', and there are no in-flow children

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

Detailed analysis of each condition

1. They all belong to the block-level box in the stream and are in the same block formatting context.

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

Conclusion 1: The box margin of the root element will not overlap (reason: although the root element is a block-level box, it is not an in-flow element).

The above is the detailed content of Definition and calculation rules of margin overlap. For more information, please follow other related articles on the PHP Chinese website!