CSS Box Model

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

One: CSS padding properties

The inner margin of an element is between the border and the content area. The simplest property that controls the area is the Padding property.

CSS Padding property defines an empty area between the element's border and the element's content

The Padding property accepts a length or percent value but does not allow negative values

　　

The top, right, bottom, and left margins are also set by using the following four separate properties:

• Padding-top
• Padding-right
• Padding-bottom
• Padding-left

　　

Example 1padding:10px 5px 15px 20px; the top padding is 10px right padding is 5px under the inner margin is 15px left padding is 20px example 2padding:10px 5px 15px; the top padding is 10px right inner margin and left inner margin is within 5px Margin is 15px example 3padding:10px 5px; the top and bottom padding are 10px right padding and left padding is 5px example 4padding:10px; all 4 padding are 10px

Two: CSS Border properties

　　

The bounding rectangle (border) of an element is one or more lines around the content and padding of the element.

The CSS border property allows you to specify the style, width, and color of the element's border.

　　

Set the style for 4 borders: P  {  border:5px solid red;  }

p.aside {border-style:solid dotted dashed double;}

The above rule defines four border styles for a paragraph with the class name aside: A solid top border, a dotted right box, a dashed border, and a double line left border.

Three: CSS margin property

An empty area around the border of an element is the margin. Setting the margin creates an extra "blank" outside the element.

The simplest way to set the margin is to use the margin property, which accepts any length units, percentages, or even negative values.

The margin property accepts any length unit, which can be pixels, inches, millimeters, or EM.

You can use any of the following properties to set only the corresponding margin, without affecting all other margins directly:

• Margin-top
• Margin-right
• Margin-bottom
• Margin-left

Example 1margin:10px 5px 15px 20px; upper margin is 10px right margin is 5px bottom margin is 15px left margin is 20px example 2margin:10px 5px 15px; top margin is 10px right margin and left margin is 5px bottom margin Is the 15px example 3margin:10px 5px; the upper margin and the bottom margin are 10px right margin and left margin are 5px example 4margin:10px;

Four: element centered display

margin:0 Auto;

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.

Margin Merge

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:

Try it yourself.

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

Try it yourself.

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

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

If the margin encounters the margin of another element, it also merges:

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

The margin merger may seem a bit strange at first, but in fact it's meaningful. 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.

Note: Margin merges occur only in the vertical margins of a block box in a normal document flow. Margins between inline boxes, floating boxes, or absolute positioning are not merged

CSS Box Model