Exploration of vertical outer margin superposition

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.