Skip to main content

The box-sizing Property

The box-sizing property is the single most important tool for modern CSS layout. It fundamentally changes the way the browser calculates an element's total width and height based on the values you set.

Without box-sizing, layout can be frustratingly unpredictable because adding padding or a border changes the total size of the element. box-sizing provides a solution to this.

It accepts two main values: content-box (the default) and border-box (the recommended value).


1. box-sizing: content-box; (The Default)​

This is the standard, original CSS Box Model behavior.

  • Calculation: width and height properties apply only to the Content Area.
  • Result: The element's total size on the page is the sum of its Content size, plus any Padding, plus any Border.

Total Width=Content Width+PaddingL+PaddingR+BorderL+BorderR\text{Total Width} = \text{Content Width} + \text{Padding}_L + \text{Padding}_R + \text{Border}_L + \text{Border}_R

Drawbacks​

If you set a container to width: 50%; and then add padding: 10px;, the element will actually be wider than 50%50\% of its parent, often causing layout breakage or horizontal scrolling.

2. box-sizing: border-box; (The Modern Standard)​

This behavior is far more intuitive for layout work.

  • Calculation: width and height properties apply to the Content Area + Padding + Border.
  • Result: Padding and Border are absorbed into the declared width and height. The Content Area shrinks to accommodate them. The element's final size remains exactly the size you declared.
Total Width=Declared Width\text{Total Width} = \text{Declared Width}

Recommendation​

For virtually all modern web development, it is recommended to set box-sizing: border-box; globally using the universal selector:

styles.css
/* This is often the first CSS rule in a modern stylesheet */
*, *::before, *::after {
  box-sizing: border-box;
}

This ensures that 100px100\text{px} is always 100px100\text{px}—including the padding and border—making responsive grid systems much easier to manage.


Interactive box-sizing Demo​

In the demo below, both boxes have the same CSS dimensions (width: 300px, padding: 20px, border: 10px). Observe how the final visual size differs based on the box-sizing value.