CSS margin overlap and Prevention methods

CSS margin overlap and Prevention methods Hu Juntao | 2011-11-17

boundary overlap refers to two or more boxes (which may or may be nested) adjacent boundaries (in which there is no non-empty content, padding, borders) coincident together to form a single boundary.

The vertical adjacent boundary of two or more block-level boxes is coincident. The boundary width of the result is the largest value in the width of the adjacent boundary. If there is a negative boundary, the maximum negative boundary of the absolute value is subtracted from the largest positive boundary. If there is no positive boundary, the maximum negative boundary of the absolute value is subtracted from zero. Note: Adjacent boxes may not be generated by the elements of a parent-child or sibling relationship.
However, there are exceptions to the overlap of borders:

1, the horizontal margin never coincides.
2, in the specification document, the vertical margin adjacent to 2 or more block-level box models overlaps. The final margin value is calculated as follows:
A, all positive values, whichever is greater,
B, not all positive, then absolute value, minus the maximum by positive values,
C, no positive values, and then minus the maximum by 0.
Note: Adjacent box models may be dynamically generated by DOM elements and have no adjacent or inheritance relationships.
3, the adjacent box model, if one of them is floating (float), the vertical margin does not overlap, and the floating box model and its child elements are also the same.
4, the margin between the element with the overflow attribute set and its child elements is not overlapped (except for the overflow value is visible).
5, the box model with absolute positioning (Position:absolute) is set, and the vertical margin is not overlapped, and the same is true between their child elements.
6, the Display:inline-block elements are set, and the vertical margin does not overlap, even between their child elements.
7, if the upper and lower margin of a box model is adjacent, then its margin may overlap overlay (collapse through) it. In this case, the position of the element (position) depends on whether the margin of its neighboring elements overlaps.
A, if the margin of the element overlaps with the margin-top of its parent element, 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 overlap 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 element that has a purge operation applied will never overlap with the margin-bottom of its block-level parent element.
Note that the position of those elements that have been overwritten by overlap has no effect on the position of other elements that have already been overlapped, and the border-top boundary position is required only if the child elements of those elements are positioned.
8, the vertical margin of the root element is not overlapped.

Margin (margin) overlap example
Margin overlap refers to two vertically adjacent block-level elements, when the top and bottom two margins meet, the margin will overlap, and the margin after overlap, equal to the larger of those.
Icon:

Another overlap is when an element is contained within another element, and there is overlap between the child element and the parent element, and the overlapping margin is equal to the largest of those:

Similarly, if an empty element has no content, its own top and bottom margins overlap.

Meaning of margin overlap

The overlap of the margins is only generated between the upper and lower margins of the normal flow document, and this seemingly odd rule has its practical significance. Imagine that when we arrange a block-level element of a series of rules, such as paragraph p, there is no double distance between the blocks because of the margin overlap.

Prevent margin overlap solutions:
Although the overlap of the margin has its meaning, but sometimes we do not want to create overlapping elements in the design, then there are several suggestions to be consulted:

1. outer element padding instead of
2. Inner element transparent border border:1px solid transparent;
3. Inner element Absolute Positioning Postion:absolute:
4. outer element Overflow:hidden;
5. inner element plus float:left; or display:inline-block;
6. Inner layer element padding:1px;

The above suggestions can be taken according to the actual situation.

PS: Once considered a browser bug, shame Ah!

CSS margin overlap and Prevention methods