How do box-sizing rules affect an element’s final width?

First check its box-sizing value, then add the horizontal padding and borders if it uses content-box. Under that rule, width sets the content width; padding and borders add to the rendered width. Under border-box, the declared width includes the content, padding, and borders, but not margins. [S1]

Use this formula for the width including borders, but excluding margins:

• content-box: declared width + left and right padding + left and right border
• border-box: declared width

For example, assuming width: 300px, padding: 20px on each side, and a 2px border on each side, content-box gives 300 + 20 + 20 + 2 + 2 = 344px. With border-box, the result is 300px. [S1] The declared width means different parts of the box in these two cases.

Here are two otherwise identical examples. The box-sizing line is the difference:

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

.border-example {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid;
}

For .content-example, the content is 300px wide, and the padding and border add 44px, making the width including borders 344px. For .border-example, the declared 300px includes the content, padding, and border, so the width including borders is 300px. [S1]

These figures assume the shown values apply on both horizontal sides. They exclude margins, which are not included in the declared width under either rule. [S1]

If you want the width including padding and borders to match your declared width, use box-sizing: border-box. For example, with width: 300px, padding: 20px, and border: 2px solid, the outside width including borders is 300px under border-box. [S1]

With content-box, you can calculate a declared width for a target outside width: subtract both horizontal padding values and both border widths. For a 300px target with 20px padding on each side and a 2px border on each side, calculate 300 - 20 - 20 - 2 - 2 = 256px for the declared content width. That calculation assumes those exact values on both sides and excludes margins. The source explains the box-sizing rules; it does not determine the dimensions of any particular element in your page.

Write down the declared width, the box-sizing value, and the left and right padding and border separately. Then apply the matching formula rather than treating width as the same measurement in every case. If a number still differs from what you expect, recheck the values you used in the calculation; this guide’s arithmetic covers padding and borders, not margins.

For a compact note, copy and fill in:

box-sizing: [content-box or border-box]
width: [number]
padding: [left] + [right]
border: [left] + [right]
rendered width including borders, excluding margins: [result]

For content-box, add the four side values to the declared width. For border-box, the declared width already includes padding and borders. [S1] This is a calculation guide, not an inspection of your specific page, so use the actual CSS values for your element.