CSS box model (basic for compatibility issues a little help)

Source: Internet
Author: User

(i). The CSS box model specifies how the element frame handles element content, padding, borders, and margins.

1. Change the style and format the default values:

* {




2. Margin consolidation

Margin merging (overlay) is a fairly simple concept. However, when you lay out a Web page in practice, it creates a lot of confusion.

In short, margin merging means that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

When an element appears above another element, the bottom margin of the first element merges with the top margin of the second element. Please see:

3. Box Model Overview:

4. When an element is contained within another element (assuming that no padding or borders are separated from the margin), the upper and/or lower margins are merged. Please see:

Although it may seem strange, margins can even merge with themselves.

5. Suppose there is an empty element with an outer margin, but no border or padding. In this case, the top margin and the bottom margin are met together, and they merge:

This is why a series of paragraph elements occupy very little space because all of their margins are merged together, forming a small margin.

6. The margin merger may seem a bit strange at first, but in fact it does make sense. Take the example of a typical text page consisting of several paragraphs. The space above the first paragraph equals the upper margin of the paragraph. If there is no margin merge, the margins between all subsequent paragraphs will be the same as the top margin and the bottom margin. This means that the space between the paragraphs is twice times the top of the page. If a margin merge occurs, the top and bottom margins between the paragraphs are merged together, so that the distances are consistent.

CSS box model (basic for compatibility issues a little help)

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.