CSS margin overlap and how to prevent it

The vertically adjacent edges of two or more block-level boxes overlap. The resulting border width is the largest of the adjacent border widths. If negative bounds occur, the negative bound with the largest absolute value is subtracted from the largest positive bound. If there are no positive bounds, the negative bound with the largest absolute value is subtracted from zero. Note: Adjacent boxes may not be generated by elements in a parent-child or sibling relationship.

However, there are exceptions to the overlapping boundaries:

1. Horizontal margins never overlap.

2. In the specification document, the adjacent vertical margins of two or more block-level box models will overlap. The final margin value is calculated as follows:

a. All are positive values, take the largest one;

b. If they are not all positive values, take their absolute values ​​and then subtract the maximum value from the positive value;

c. If there is no positive value, take the absolute value and then subtract the maximum value from 0.

Note: Adjacent boxes may be generated dynamically by DOM elements and have no adjacent or inherited relationship.

3. Among adjacent box models, if one of them is floating (float), the vertical margins will not overlap, and the same is true between the floating box model and its child elements.

4. The margins between an element with the overflow attribute set and its child elements are not overlapped (except when the overflow value is visible).

5. For a box model with absolute positioning (position:absolute), vertical margins will not be overlapped, and the same is true between them and their child elements.

6. Elements with display:inline-block set will not have their vertical margins overlapped, even with their child elements.

7. If the top and bottom margins of a box model are adjacent, its margin may overlap and cover (collapse through) it. In this case, the position of an element depends on whether its neighboring elements' margins overlap.

a. If the margin of an element overlaps with the margin-top of its parent element, the border-top boundary definition of the box model is the same as that of its parent element.

b. In addition, the parent element of any element does not participate in the margin overlap, or in other words, only the margin-bottom of the parent element is involved in the calculation. If the element's border-top is non-zero, then the element's border-top edge is positioned the same as before.

The margin-top of an element with clearing applied to it will never overlap the margin-bottom of its block-level parent.

Note that the positioning of elements that are already covered by overlap has no effect on the positioning of other already overlapping elements; the border-top position is only necessary when positioning the children of these elements.

8. The vertical margin of the root element will not be overlapped.

Margin overlap example

Margin overlap refers to the phenomenon that when the upper and lower margins of two vertically adjacent block-level elements meet, the margins will overlap, and the margins after the overlap are equal to the larger one.

In order to help everyone make learning easy and efficient, we share a large amount of information with you for free to help you overcome difficulties on the road to becoming a front-end engineer or even a full-stack engineer. Here I recommend a front-end full-stack learning exchange circle: 784783012. Welcome everyone to join the group to discuss, learn and make progress together.

When you really start learning, it is inevitable that you don’t know where to start, which leads to low efficiency and affects your confidence in continuing to learn.

But the most important thing is that you don’t know which technologies you need to focus on, and you often fall into traps when learning, which ultimately wastes a lot of time, so effective resources are still necessary.

icon:

Another overlapping phenomenon is that when an element is contained in another element, the child element will also overlap with the parent element. The outer margin after the overlap is equal to the largest of the two:

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

The meaning of overlapping margins

Margin overlap only occurs between the top and bottom margins of a normal flow document. This seemingly strange rule actually has practical significance. Imagine that when we arrange a series of regular block-level elements (such as paragraph P) up and down, there will be no double distance between paragraphs because of the overlapping margins between block elements.

Solution to prevent margin overlap:

Although overlapping margins has its own meaning, sometimes we don’t want elements to overlap in design. Here are some suggestions for reference:

1. Outer element padding instead
2. Inner element transparent border border:1px solid transparent;
3. Inner elements are absolutely positioned with position:absolute:
4. Outer element overflow:hidden;
5. Add float:left; or display:inline-block to the inner elements;
6. Inner element padding: 1px;

Summarize

The above is the CSS margin overlap and prevention method introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!