CSS margin overlap and prevention methods

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 will never coincide.

2, in the specification document, 2 or more block-level box models adjacent to the vertical margin will overlap. 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.

3. In 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 of visible).

5, set the absolute positioning (position:absolute) box model, vertical margin will not be overlapping, and their child elements are the same.

6, set the elements of the Display:inline-block, vertical margin will not overlap, and even between their child elements are the same.

7, if a box model of the upper and lower margin 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 margin overlap, or only the parent element's Margin-bottom 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 overlap with the margin-bottom of its block-level parent element.

Note that the position of those elements that have already been overlapped has no effect on the position of the other overlapping elements, 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. 
   

3. Inner element transparent border border:1px solid transparent;

4. 
   

5. Inner element Absolute Positioning Postion:absolute:

6. 
   

7. outer element Overflow:hidden;

8. 
   

9. inner element plus float:left; or display:inline-block;

10. 
    

11. Inner layer element padding:1px;

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

PS: Once considered a browser bug, shame Ah!