CSS box model (box Model overview, Padding, borders, margins, margin merge)

CSS Box Model Overview

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

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.

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 size of the element box.

Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, see:

#box {  width:70px;  margin:10px;  padding:5px;}

Tip: Padding, borders, and margins can be applied to all edges of an element or to individual edges.

Tip: Margins can be negative, and in many cases negative margins are used.

Browser compatibility

Once the appropriate DTD has been set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is not correct. According to the specification, the space occupied by the element content is set by the Width property, and the padding and border values around the content are calculated separately. Unfortunately, IE5. X and 6 use their own non-standard models in quirks mode. These browsers have a width property that is not the contents, but the sum of the content, padding, and width of the border.

Although there are ways to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding an inner margin with a specified width to an element, try adding padding or margins to the element's parent and child elements.

Terminology translation

• Element: Elements.
• padding: The padding, also has the data to translate it to fill.
• border: Border.
• Margin: The margin is also available for translation into blank or blank edges.

In W3school, we refer to padding and margin uniformly as the inner margin and margin. White space inside the border is the padding, outside the border is the margin, it is easy to remember:)

CSS Inner Margin properties

Properties	Description
Padding	Shorthand property. The effect is to set the inner margin property of an element in a declaration.
Padding-bottom	Sets the bottom padding of an element.
Padding-left	Sets the left padding of the element.
Padding-right	Sets the right padding for an element.
Padding-top	Sets the top padding of an element.

CSS Border Properties

Properties	Description
Border	Shorthand property, which is used to set properties on four sides in a declaration.
Border-style	The style used to set all borders of an element, or to individually set border styles for each edge.
Border-width	Shorthand property to set the width for all the borders of an element, or to set the width individually for each edge border.
Border-color	Shorthand property, sets the color of the visible part of all the borders of an element, or sets a color for 4 edges.
Border-bottom	Shorthand property, which is used to set all properties of the bottom border to a declaration.
Border-bottom-color	Sets the color of the bottom border of an element.
Border-bottom-style	Sets the style of the bottom border of an element.
Border-bottom-width	Sets the width of the bottom border of an element.
Border-left	Shorthand property, which is used to set all properties of the left border to a declaration.
Border-left-color	Sets the color of the left border of the element.
Border-left-style	Sets the style of the left border of an element.
Border-left-width	Sets the width of the left border of the element.
Border-right	Shorthand property, which is used to set all properties of the right border to a declaration.
Border-right-color	Sets the color of the right border of an element.
Border-right-style	Sets the style of the right border of an element.
Border-right-width	Sets the width of the right border of an element.
Border-top	Shorthand property, which is used to set all properties of the top border to a declaration.
Border-top-color	Sets the color of the top border of an element.
Border-top-style	Sets the style of the top border of an element.
Border-top-width	Sets the width of the top border of an element.

CSS Margin Properties

Properties	Description
Margin	Shorthand property. Set all margin properties in a declaration.
Margin-bottom	Sets the bottom margin of the element.
Margin-left	Sets the left margin of the element.
Margin-right	Sets the right margin of the element.
Margin-top	Sets the top margin of the element.

CSS margin Merge

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.