CSS Box Sizing

Imagine buying a picture frame. You want the frame to fit a specific 10-inch wide spot on your wall. In the standard box model (content-box), the manufacturer builds a 10-inch glass pane, then adds 2 inches of wooden frame around it, making the total size 14 inches. It overflows and fails to fit on your wall. Now, imagine buying a frame built using the border-box model. The manufacturer takes the 10-inch size constraint and builds the outer frame to fit that size exactly, shrinking the internal glass pane to fit inside. CSS box-sizing: border-box does exactly that. It forces borders and padding to sit inside your width, keeping elements from overflowing.

In this page:

Understanding content-box (Default)
Understanding border-box
Why border-box is Preferred
The Global Box Reset
Sizing Custom Grid Cards

Understanding content-box (Default)

By default, browsers calculate element widths using the content-box model. This means that any padding or borders you add are added to the outside of the width, making the element physically wider than specified.

Note: Avoid using content-box for layouts with padding, as it can cause element dimensions to overflow.

Warning: Neglecting the default box model can cause sibling elements to push each other down and break your page columns.

Example: Understanding content-box (Default)

css

<style>
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
</style>
<div class="box">Renders wider than 200px: padding and border add on top</div>

Understanding border-box

The border-box model forces borders and padding to sit inside your specified width, shrinking the content area to fit. This makes calculating element sizes and building clean layouts much easier.

Note: Use border-box to keep your element widths predictable and layout calculations simple.

Warning: If your padding and borders are larger than the specified width, the content inside will overflow.

Example: Understanding border-box

css

<style>
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
</style>
<div class="box">Stays exactly 200px: padding and border included</div>

Why border-box is Preferred

When building responsive grid layouts, columns are typically defined in percentage widths (like two 50% columns). If you add padding or borders to these columns under the default content-box model, they will overflow 100% and break. The border-box model solves this by keeping your column widths exact and predictable.

Note: Use border-box to build fluid, responsive multi-column layouts easily without layout breaks.

Warning: Mixing content-box and border-box columns on the same page can cause layout alignment errors.

Example: Why border-box is Preferred

css

<style>
.col {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
  background: lightblue;
  border: 1px solid #666;
  float: left;
}
</style>
<div class="col">50%</div>
<div class="col">50% — stays exact, doesn't overflow 100%</div>

The Global Box Reset

To avoid writing box-sizing: border-box on every single class selector in your stylesheets, you can use the global reset selector (*) combined with pseudo-elements to apply border-box to all elements on your page automatically.

Note: Include this global reset rule at the very top of all your stylesheets.

Warning: Some third-party widget scripts may rely on default content-box sizing, so test integrations carefully.

Example: The Global Box Reset

css

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

Sizing Custom Grid Cards

Using border-box is essential when building complex card grids that have borders and padding, keeping your columns perfectly aligned and preventing layout shifts.

Note: Pair border-box with modern Flexbox layouts to build predictable, responsive grids.

Warning: Ensure your image files inside styled cards do not have hard-coded widths that can override responsive box limits.

Example: Sizing Custom Grid Cards

css

<style>
.card {
  box-sizing: border-box;
  width: 33.33%;
  padding: 16px;
  border: 1px solid #ddd;
  float: left;
}
</style>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>

Common Mistakes

Using the default content-box model, causing elements with 100% width and padding to overflow.
Forgetting to apply box-sizing to pseudo-elements (::before and ::after) in your global resets.
Attempting to manually subtract padding sizes in your stylesheets instead of using border-box.

Chapter Summary

The content-box model calculates element widths by adding padding and borders to the outside of the width, causing layouts to overflow.
The border-box model forces borders and padding to sit inside the specified width, making layout sizing predictable.
Include a global box reset ( { box-sizing: border-box; }) at the very top of your stylesheets to apply border-box globally.

Browser Support

The box-sizing property and border-box sizing are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS !important Next Lesson → CSS Media Queries