Exploration of vertical outer margin superposition

The outer margin overlay may occur in two cases. The first is the peer element of the upper and lower adjacent static positioning, for example:

In, the margin values in the four directions of the blue Div and the black Div are both 20px, so the vertical distance between the blue Div and the black Div should be 20 + 20 = 40px, but the fact is that their spacing is only 20 PX, which is the so-called overlay effect. The value after overlay is the larger of the two overlapping margins. OnlyStatic locationOrRelative positioningBetween the elements, the margin overwrites, Intra-row and floating Elements And Absolute Positioning .

The above is the first case, and the second case is the outer margin overlay between the parent element and the child element, for example:

in, the blue Div and the black Div are the child elements of the gray Div, And the margin values of the three Div are both 20, however, we can see that there is no 20px gap between the upper boundary of the blue Div and its parent element, and the gap between the lower boundary of the Black Div and its parent element is also 20px, that is to say, the upper and outer margins of the blue Div are superimposed with the upper and outer margins of its parent element, as if the upper and outer margins of the blue Div ran out. The same is true for the black Div. This is the margin superposition between the parent element and the child element. The value after the superposition is the larger of the two. Note: in IE6 and 7, if a specific height (Height: Auto is not counted) is set for the parent element, no overlay effect will be displayed, but in IE8, FF and other browsers, even if the height is set for the parent element, the overlay occurs. Another condition is that the top and bottom margins of the child element cannot be padding or border between the top or bottom boundary of the parent element.