Solve the problem of margin merging

1. Merge the margins of sibling elements

The effect is as follows: (the spacing between the two is 100px, not 150px)

2. Merge the outer margins of nested elements

For two nested elements, if there is no content in the parent element or the content is behind the child element and there is no top padding and border, the top margin of the parent element will be merged with the top margin of the child element, and the value will be the largest top margin, which will be used as the top margin of the parent element. Collapse occurs even if the parent element's top margin is 0. (collapse only occurs in the vertical direction)

Solution:

1. Define a 1-pixel top border for the parent element.

2. Define a 1-pixel top padding for the parent element.

3. Add overflow:hidden to the parent element;

Note that the first and second methods are not good and will increase the size of the box. The third method hides the overflowing content, which neither increases the size of the box nor affects the content.

Summarize

The above is what I introduced to you about solving the problem of margin merging. I hope it will be helpful to you. If you have any questions, please leave me a message and I 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!