CSS Box Model Overview

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

CSS Box Model Overview

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.

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

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.

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 Box Model Overview