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

(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:

* {

margin:0;

padding:0;

}

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)