CSS Box Sizing

CSS Box Sizing

The CSS box-sizing property determines how an element's declared width and height are calculated in relation to its content, padding, and border.

By default, CSS uses content-box, where the declared width and height apply to the content area. The commonly used border-box value instead includes the content, padding, and border within the declared dimensions.

The box-sizing Property

The box-sizing property controls what is included when CSS calculates an element's specified width and height.

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

The two values most important for everyday layouts are content-box and border-box.

content-box

The initial value of box-sizing is content-box. With this model, the width and height properties set the dimensions of the content area.

.box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
}

The content width is 300px. The left and right padding add 40px, and the left and right borders add another 10px.

300px content width
+ 40px padding
+ 10px border
= 350px border-box width

The visible border box is therefore 350px wide even though the declared width is 300px.

border-box

With box-sizing: border-box, the declared width and height include the content area, padding, and border.

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
}

The complete border box remains 300px wide. CSS subtracts the horizontal padding and borders from the available content width.

300px declared width
- 40px padding
- 10px border
= 250px content width

This often makes element dimensions easier to calculate because adding padding or increasing the border does not increase the specified border-box width.

Comparing content-box and border-box

Two elements can have the same declared width, padding, and border but occupy different widths depending on their box-sizing value.

.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
}
.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
}

The difference is not the amount of padding or border. Both boxes have the same padding and border values. The difference is whether those areas are added to the declared width or included within it.

Why border-box Is Commonly Used

The border-box model can make layout sizing more predictable because the declared width includes the padding and border.

.box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 2px solid steelblue;
}

With border-box, the element's border box remains within the declared 100% width. With content-box, the horizontal padding and borders would be added outside the declared width and could make the box wider than the available space.

This is especially convenient for responsive layouts where elements often use percentage or flexible widths.

Applying border-box to All Elements

Many websites apply border-box throughout the document so elements use the same sizing model.

*, *::before, *::after {
  box-sizing: border-box;
}

The universal selector applies the rule to all elements, while *::before and *::after include generated pseudo-elements.

This approach is commonly included in CSS resets, base styles, or the beginning of a site's stylesheet.

Margins and box-sizing

Margins are not included in the dimensions calculated by either content-box or border-box.

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
  margin: 30px;
}

The border box remains 300px wide. The left and right margins are outside that box and create additional space around it.

This distinction is important when calculating how much room an element and its surrounding margins require in a layout.

Box Sizing Example

The following example creates two boxes with the same declared width, padding, and border. The first uses content-box, while the second uses border-box.

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

Open the example in the editor and compare the widths of the two boxes. Change the padding or border values and run the example again. The content-box element grows outward, while the border-box element keeps its declared width.