Problem of CSS margin overlay (merging)

Source: Internet
Author: User

Many strange problems may occur during CSS webpage layout. These problems may be browser bugs, or we may not know enough about CSS attributes. Although 52css.com introduces a lot of knowledge, but if you do more coding, you have mastered the skills.
Today, we will talk about the CSS margin overlay. The margin merge means that when two vertical margins meet each other, they will form an extra margin.
The height of the merged margin is equal to the larger of the two merged margins.
Outer margin Merge (superposition) is a simple concept. However, in practice, layout a webpage is confusing.
In short, the outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.
When an element appears on another element, the bottom margin of the first element is merged with the top margin of the second element. See:

When an element is contained in another element (if there is no padding or the border separates the outer margin), the upper and/or lower margins are also merged. See:

Although it looks strange, the margin can even be merged with itself.
Suppose there is an empty element with an outer margin but no border or fill. In this case, the top and bottom margins are met together and they will be merged:

If this margin encounters the margin of another element, it will also be merged:

This is why a series of paragraph elements occupy a very small space, because all their margins are merged to form a small margin.
The outer margin merging may seem a bit strange at the beginning, but it actually makes sense. Take a typical text page composed of several paragraphs as an example. The space above the first paragraph is equal to the margin above the paragraph. If no margin is merged, the margin between all subsequent sections will be the sum of the adjacent top margin and bottom margin. This means that the space between paragraphs is twice that at the top of the page. If the outer margin is merged, the upper and lower margins of the paragraphs are merged, so that the distance between the sections is the same.

Note: Only the vertical outer margin of the block box in the normal document flow can be merged. The margin between the inside box, floating box, or absolute positioning is not merged.

Related Article

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.