In this note, the "Collapsing margins" (folding margin) means: 2 or more box models (relationships can be contiguous or nested) adjacent margin properties (this cannot have non-empty content, padding area, border border
Or use the purge separation method) to represent a separate margin.
In css2.1, the horizontal margin is not collapsed.
Vertical margin may be folded in some box models:
1. In the regular document flow, the vertical margin adjacent to 2 or more block-level box models is collapsed.
The final margin value is calculated as follows:
A, all are positive, take the largest person;
b, not all positive values, then the absolute value is taken, and then minus the maximum with a positive number;
C, without a positive value, take absolute values and subtract the maximum by 0.
Note: Adjacent box models may be dynamically generated by DOM elements and do not have an adjacent or inheritance relationship.
2. In the adjacent box model, if one of them is floating (floated), the vertical margin will not be folded, even between a floating box model and its child elements.
3. The margin between the element that sets the overflow attribute and its child elements is not collapsed (except for the overflow value).
4, set the absolute positioning (position:absolute) of the box model, vertical margin will not be folded, and even between their child elements are the same.
5, set the Display:inline-block elements, the vertical margin will not be folded, and even between their child elements are the same.
6, if a box model of the upper and lower margin adjacent, then its margin may be folded cover (collapse through) it. In this case, the position of the element (position) depends on whether the margin of its neighboring elements is collapsed.
A, if the margin of the element and the margin-top of its parent element are folded together, the bounding definition of the box model Border-top is the same as its parent element.
b, in addition, the parent element of any element does not participate in the folding of margin, or only the margin-bottom of the parent element is involved in the calculation. If the element's border-top is nonzero, then the element's border-top boundary position is the same as the original.
A margin-top of an element that has a purge operation applied will never collapse with the margin-bottom of its block-level parent element.
Note that the position of those elements that have been collapsed has no effect on the position of the other elements that have been collapsed, and the border-top boundary position is required only if the child elements of those elements are positioned.
7. The vertical margin of the root element is not collapsed.
The margin-bottom of a floating block-level element is always adjacent to the sibling of the floating block-level sibling element (floated next In-flow block-level margin-top) behind it, unless the same sibling element uses the purge operation.
The margin-top of the floating block-level element and its first floating-block-level child element (floated-in-flow block-level children) are adjacent to Margin-top (if the element does not have border-top, There is no padding-top, and the child element is not using the purge operation).
Margin-bottom of a floating block-level element if the following conditions are met, it is adjacent to the margin-bottom of its last floating block-level child element (if the element does not specify Padding-bottom or border):
A, designated Height:auto
B, min-height less than the actual use height of the element (height)
C, max-height greater than the actual use height of the element (height)
If the Min-height property of an element is set to 0, the margin it owns is contiguous, and it has neither border-top nor border-bottom, nor padding-top and Padding-bottom, Its Height property can be 0 or auto, it cannot contain an inline box model (line box), and its margin for all floating child elements (if any) is also contiguous.
When the margin owned by an element is collapsed, and it uses a purge operation, its margin-top will collapse with the adjacent margin of the sibling element immediately following it, but the result is that its margin will not be folded with the margin-bottom of its block-level parent element.
The collapse operation is based on the values of padding, margin, border (that is, after the browser resolves all these values), and the collapsed margin calculation overrides the values of the different margin that were used.
Why does a child element use Margin-top instead on the parent element? Doesn't work on the elements that use Margin-top?