Overview of CSS Box Model

The CSS Box Model (Box Model) specifies how element boxes handle element content,Padding,Border and Margin method.

Overview of CSS Box Model

CSS Box Model

The innermost part of the element box is the actual content, directly surrounded by padding. Padding presents the background of the element. The edge of the padding is the border. Outside the border is the margin, which is transparent by default and does not block any elements behind it.

Tip:Background is applied to the area composed of content and padding, border.

Padding, border, and margin are optional, with a default value of zero. However, many elements are set by the user agent stylesheet for margin and padding. These browser styles can be overridden by setting the margin and padding of the element to zero. This can be done separately or using a universal selector to set all elements:

* {
  margin: 0;
  padding: 0;
}

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

Assuming each edge of the box has a margin of 10 pixels and a padding of 5 pixels. If you want this element box to reach 100 pixels, you need to set the content width to 70 pixels. Please see the diagram below:

CSS Box Model Example 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Tip:Padding, border, and margin can be applied to all sides of an element or to individual sides.

Tip:The margin can be negative, and in many cases, negative margins should be used.

Browser Compatibility

Once a proper DTD is set for the page, most browsers will display the content as shown in the diagram above. However, the display in IE 5 and 6 is incorrect. According to the W3C specification, the space occupied by the element content is set by the width attribute, while the padding and border values around the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard model in Quirks Mode. The width attribute of these browsers is not the width of the content, but the total width of the content, padding, and border.

Although there are methods to solve this problem. But the best solution at present is to avoid this problem. That is, do not add inner padding with specified width to the element, but try to add inner padding or outer margin to the parent element and child element of the element.

Term Translation

  • element: element.
  • padding: inner padding, also known as fill in some materials.
  • border: border.
  • margin: outer margin, also known as space or blank edge in some materials.

At codew3c, we uniformly refer to padding and margin as inner padding and outer margin. The blank space within the border is the inner padding, and the blank space outside the border is the outer margin. Easy to remember, right:)?