Box Sizing

Difficulty: Beginner

The box-sizing property controls how the total width and height of an element are calculated. This single property fundamentally changes how you think about sizing elements and is one of the most impactful CSS properties to understand. There are two values: content-box (the default) and border-box (the practical choice used by virtually all modern projects).

With box-sizing: content-box (the default), the width and height properties set only the content area. Padding and border are added on top of the declared dimensions. So a box with width: 300px, padding: 20px, and border: 5px solid takes up 300 + 20 + 20 + 5 + 5 = 350px of horizontal space. This additive behavior is counterintuitive because the element is wider than the declared width, which leads to layout bugs, especially when combining percentage widths with fixed padding.

With box-sizing: border-box, the width and height properties include the content, padding, and border. The same box with width: 300px, padding: 20px, and border: 5px solid takes up exactly 300px of horizontal space. The content area shrinks to 250px to accommodate the padding and border. This is far more intuitive because the declared width is the actual space the element occupies.

The universal box-sizing reset is one of the most widely adopted CSS patterns. It applies border-box to every element on the page. The recommended pattern uses the inheriting approach: set box-sizing: border-box on the html element, then use box-sizing: inherit on *, *::before, and *::after. This makes border-box the default while still allowing individual components to opt out if needed. Every major CSS framework (Bootstrap, Tailwind, etc.) includes this reset.

Understanding box-sizing is critical for responsive design. When you set width: 50% on two side-by-side elements, content-box makes them overflow their parent if they have any padding or border, because the padding is added to the 50%. With border-box, the padding is included within the 50%, so the elements fit perfectly. This is why border-box is essential for grid layouts, responsive components, and any design where elements need to fit within precise proportions.

Code examples

content-box vs border-box Comparison

/* content-box (default): padding and border ADD to width */
.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  background-color: lightblue;
  /* Content width: 300px */
  /* Total width: 300 + 20 + 20 + 5 + 5 = 350px */
}

/* border-box: padding and border INCLUDED in width */
.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  background-color: lightgreen;
  /* Content width: 300 - 20 - 20 - 5 - 5 = 250px */
  /* Total width: 300px */
}

Both elements are declared as width: 300px, but they render differently. The content-box element takes 350px of space. The border-box element takes exactly 300px. The border-box model is easier to reason about because the declared width is the actual rendered width.

The Universal Box-Sizing Reset

/* Recommended universal reset */
html {
  box-sizing: border-box;
}

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

/* Alternative simple reset (also works) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

The inherit approach sets border-box on html and uses inherit for everything else. This allows a component to opt out by setting box-sizing: content-box, and its children will inherit that change. The simple approach directly sets border-box on all elements. Both are widely used; the inherit approach is slightly more flexible.

Why border-box Matters for Layouts

/* WITHOUT border-box: these overflow the parent */
.col-broken {
  box-sizing: content-box;
  width: 50%;
  padding: 20px;
  float: left;
  /* Actual width: 50% + 40px -- overflows parent! */
}

/* WITH border-box: these fit perfectly */
.col-fixed {
  box-sizing: border-box;
  width: 50%;
  padding: 20px;
  float: left;
  /* Actual width: exactly 50% of parent */
}

/* Modern approach with flexbox */
.row {
  display: flex;
}
.col {
  box-sizing: border-box;
  flex: 0 0 50%;
  padding: 20px;
  /* Padding is included in the 50% */
}

This is the main reason border-box exists. When using percentage widths, content-box adds padding on top, causing overflow. border-box includes padding within the percentage, so 50% + 50% actually equals 100%, not more.

Visualizing the Box Model in DevTools

/* Use this element to practice in browser DevTools */
.devtools-demo {
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  padding: 24px;
  border: 4px solid #333;
  margin: 20px;
  background-color: #e3f2fd;
}

/*
  In Chrome/Edge DevTools:
  1. Right-click the element > Inspect
  2. Look at the Computed tab
  3. You will see the box model diagram:
     - Margin (orange): 20px each side
     - Border (yellow): 4px each side
     - Padding (green): 24px each side
     - Content (blue): 344px x 144px
     Total: 400px x 200px (plus margins)
*/

Browser DevTools visualize the box model as a nested diagram. With border-box, the outer colored box matches the declared width/height. The content area shrinks to accommodate padding and border. This visualization is invaluable for debugging layout issues.

Key points

The universal border-box reset is included in virtually every modern CSS project, framework, and reset stylesheet. Apply it at the start of every project.
Margin is never included in box-sizing calculations. Whether you use content-box or border-box, margins are always additional space outside the element.
box-sizing only affects how width and height are calculated. It does not change the visual appearance of padding or borders.

Concepts covered

content-box, border-box, Universal Reset, Box Model Calculation, Sizing Behavior