Merging of vertical margins of adjacent block elements
When the upper and lower adjacent block elements (brother relationship) meet, if the upper element has margin-bottom and the lower element has margin-top, the vertical distance between them is not the sum of the two, but the value of the two The larger one, this imaginary is called merging of vertical margins of adjacent block elements.
Solution: Try to add margin value to only one box.
Nested block element vertical margin merge
For block elements with a nested relationship (parent-child relationship) of the standard flow, the parent element has a top margin and the child element also has a top margin. At this time, the parent element will collapse with a larger margin value.
Solution:
1. Define the upper border for the parent element.
2. Define the top padding for the parent element.
2. Add overflow:hidden to the parent element.