HTML & CSS reference

box-sizing

Whether `width` and `height` include the padding and the border.

Syntax

box-sizing: border-box;

Values

Parameter	Type	Description
content-box	keyword	Only the content; padding and border are added on top (the default).
border-box	keyword	Content, padding and border together.

Examples

The same width with different models:

<style>
  div { width: 200px; padding: 20px; border: 5px solid steelblue; margin-bottom: 8px; }
</style>
 
<div style="box-sizing: content-box;">content-box: 250px in total</div>
<div style="box-sizing: border-box;">border-box: exactly 200px</div>

Notes

Almost every project starts with a reset that makes sizes predictable: *, *::before, *::after { box-sizing: border-box; }.

Related recipes

In the tutorial

The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.

Thanks for reading!