Box Sizing

CSS Box Sizing

The CSS box-sizing property controls how an element's declared width and height are calculated. It determines whether padding and borders are added outside those dimensions or included within them.

The box-sizing Property

The CSS box-sizing property determines how the browser calculates an element's width and height. The two values beginners are most likely to encounter are content-box and border-box.

div {
  box-sizing: content-box;
}

div {
  box-sizing: border-box;
}

The difference between these values becomes important when an element has a declared width or height together with padding or borders.

The content-box Value

content-box is the initial value of box-sizing. With this sizing method, a declared width and height apply to the element's content box.

div {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
}

The content remains 300 pixels wide. The padding and borders are added outside that width, making the element's border box wider than 300 pixels.

Calculating content-box Size

With content-box, the width of the border box can be calculated by adding the content width, horizontal padding, and horizontal border widths.

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

A declared width of 300 pixels therefore produces a border box that is 350 pixels wide in this example.

The border-box Value

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

div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
}

The complete border box remains 300 pixels wide. The browser subtracts the horizontal padding and borders from that width to determine the space available for the content.

Calculating border-box Size

Using the same padding and border values, the available content width can be calculated by subtracting them from the declared width.

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

The element's border box stays 300 pixels wide, while its content area becomes 250 pixels wide.

Comparing content-box and border-box

The easiest way to understand the difference is to give two elements the same width, padding, and border but use a different box-sizing value.

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

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

With content-box, padding and borders increase the border-box width. With border-box, they are included within the declared width.

Box Sizing and Height

The same sizing rules apply to height. With content-box, vertical padding and borders are added outside a declared content height.

div {
  box-sizing: content-box;
  height: 100px;
  padding: 20px;
  border: 5px solid #333333;
}

This produces a border-box height of 150 pixels. If the same element uses border-box, the complete border box remains 100 pixels high and the content area becomes smaller.

Using border-box

border-box can make element sizing easier to predict because padding and borders remain inside the declared width and height.

For example, an element with width: 100%; and added horizontal padding can remain within its intended width when border-box is used.

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

Many stylesheets apply border-box broadly so that elements follow this sizing behavior consistently.

* {
  box-sizing: border-box;
}

A common variation also applies the same sizing behavior to generated pseudo-elements.

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

Try Box Sizing

Edit the width, padding, border, and box-sizing values in the example to compare how content-box and border-box calculate the size of an element.

Margins and Box Sizing

Margins are not included in either content-box or border-box sizing. They remain outside the element's border box.

div {
  box-sizing: border-box;
  width: 300px;
  margin: 20px;
}

The border box can be 300 pixels wide while the margins create additional space outside it. Changing box-sizing does not cause margins to become part of the declared width or height.

Summary

The CSS box-sizing property determines how declared width and height values are calculated. The default content-box value applies them to the content area and adds padding and borders outside those dimensions. The border-box value includes the content, padding, and borders within the declared dimensions. Margins remain outside the box in either case.

The next tutorial covers Minimum & Maximum Sizes and how CSS can place limits on an element's width and height while still allowing its size to adapt.