CSS Learning note 06 Box model

1. Box model

The so-called box model is to think of elements in an HTML page as a rectangular box, a container for content. Each rectangle consists of the element's content, padding (padding), Border (border), and margin.

The formula means: box = border + padding + content area + margin

The inner part of the element box is the actual content, and the content is directly surrounded by the padding. The inner margin renders the background of the element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.

Note: The background is applied to areas that consist of content and padding, and borders.

You can see that the background color penetrates through the content area, with the inner margin area and border.

The padding, borders, and margins are optional and the default value is zero. However, many elements will have margins and padding set by the user-agent style sheet. You can override these browser styles by setting the margin and padding of the elements to zero. This can be done separately, or all elements can be set using the Universal selector:

{    margin: 0;     padding: 0;}

In CSS, width and height refer to the widths and heights of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

2. Inner margin

The white space between the border and the content area is called the padding and is defined by the CSS's Padding property, which can use either a length or percent value, but negative values are not allowed (the setting is not valid).

You can set the top, right, bottom, and left margins (clockwise direction) by using the following four separate properties

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

Such as:

The Padding property is a composite property

• padding:10px; Indicates the padding between the top and bottom sides is 10px
• padding:10px 12px; Indicates the width of the setting is 10px, the width of the 12px is about
• padding:10px 12px 13px 14px; Set the width of the left margin on the top right, respectively
• padding:10px 20px 5px; Indicates that the top margin is 10px, the left and right margins are 20px, and the bottom margin is 5px

3. Border

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.

3.1. Border Style

You can use the following four properties to set the top, right, bottom, and left border styles (clockwise direction)

• Border-top-style
• Border-right-style
• Border-bottom-style
• Border-left-style

Common border styles are none (default), solid single solid, dashed dashed, dotted dot, double double solid lines

The same border style border-style is also a composite property, as with the padding padding settings

3.2. Border width

You can use the following four properties to set the width of the top, right, bottom, and left boxes respectively (clockwise direction)

• Border-top-width
• Border-right-width
• Border-bottom-width
• Border-left-width

Generally, the width of the border is expressed in pixels, before setting the width of the border, you must set the style of the border, the width of the border does not have any meaning, Border-width is a composite property, the same as the inner margin padding settings

As you can see from here, the background color penetrates the box's borders.

3.3. Border color

As with border style, border width, border color can also use four properties to set the width of top, right, bottom, and left borders (clockwise direction)

• Border-top-color
• Border-right-color
• Border-bottom-color
• Border-left-color

Similarly, the border color border-color is also a composite property, set to the same border style as the border width

4. Outer margin

The white space between the element borders is the margin, defined by the CSS's margin property, and can be used for any length unit, percent value, or even negative values.

Similar to the padding, you can set the top, right, bottom, and left margins (clockwise) by using the following four separate properties

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

Margin is also a composite property, as is the padding setting.

5. Outer margin merger

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

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:

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 Learning note 06 Box model