Detailed explanation of the image and text code for non-overlapping margins in css

Margin overlap

Excerpted from the Chinese version of css2.1 specification

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

Margin overlap calculation rules

Excerpted from the Chinese version of CSS2.1 specification

When two or more margins are merged, the resulting margin width is the combined margin width. the maximum value. 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, use 0 minus the maximum absolute value of adjacent margins

What are adjacent margins

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

• all belong to the in-stream block-level boxes 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, yes 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).

Give me an example

The above is the detailed content of Detailed explanation of the image and text code for non-overlapping margins in css. For more information, please follow other related articles on the PHP Chinese website!