Understanding the Box Model Through the box-sizing Property

Background

Let's first clarify the scenario: if the project layout uses a responsive approach where the div's width is given as a percentage (i.e., 100% of the window width), but the border and padding are specified in pixels, the div's total width will exceed the window width. To avoid this, you can use box-sizing: border-box to switch from the standard box model to the alternative (IE) box model, keeping the div's total width at 100%.

What Is the CSS Box Model?

In page layout, an element's margin, border, padding, and content form a box model. The box model can be divided into the standard box model and the alternative (IE) box model.

Standard Box Model

In the standard model, when you set width and height on a box, you're actually setting the width and height of the content area (content box). The padding and border are added on top of the set width and height to determine the total size of the box.

Example:

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Using the standard model, the total element width = 160px (100+25+25+5+5) and total height = 110px (50 + 25 + 25 + 5 + 5), which is the content box plus padding and border.

Note: margin is not counted in the actual size -- of course it affects the space the box occupies on the page, but it affects the external space.

Alternative (IE) Box Model

You might find it inconvenient that the box size requires adding border and padding. For this reason, CSS provides an alternative box model. With this model, all widths are the visible width, so the content width is the total width minus the border and padding. Using the same styles above, the total dimensions are width = 100px, height = 50px.

Browsers use the standard model by default. To use the alternative model, set box-sizing: border-box. This tells the browser to use border-box to define the area, so you get the size you specify.

.box { 
  box-sizing: border-box; 
} 

The box-sizing Property

The box-sizing property in CSS tells the browser how to calculate an element's total width and height.

In the default definition of the CSS Box Model (opens new window), the width (opens new window) and height (opens new window) you set on an element only apply to the content area. If the element has any border (opens new window) or padding (opens new window), the rendered box width and height will include the border and padding values. This means you must always account for borders and padding when sizing elements. This is especially frustrating when implementing responsive layouts.

The box-sizing property can be used to adjust this behavior:

• content-box is the default. If you set an element's width to 100px, the content area will be 100px wide, and any border and padding widths are added to the rendered element width.

  • Size formula:

    width = content width

    height = content height

• border-box tells the browser that the border and padding values are included in the width. That is, if you set an element's width to 100px, those 100px include its border and padding, and the actual content width is the width minus (border + padding). In most cases, this makes it easier to size elements.

  • Size formula:

    width = border + padding + content width

    height = border + padding + content height

Source: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing (opens new window)