The box-sizing property changes how the total width and height of an element is calculated.

The Problem with Default Sizing

By default (box-sizing: content-box), when you set width: 200px, that’s only the content area. Padding and border are added on top:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Total width: 200 + 40 + 10 = 250px */
}

This makes layout calculations frustrating.

The Solution: border-box

With box-sizing: border-box, the width includes padding and border:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Total width: exactly 200px */
}

The content area shrinks to accommodate padding and border within the specified width.

Values

Value	Description
content-box	Default. Width/height = content only
border-box	Width/height = content + padding + border

Universal Box Sizing Reset

It’s recommended to apply border-box to all elements:

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

This makes sizing much more intuitive:

• Set width: 50% and it’s exactly 50% of the parent
• Add padding without breaking your layout
• Easier responsive design

Note About Margin

Margin is never included in box-sizing calculations. It’s always outside the box, regardless of the box-sizing value.

Lessons in this unit:

0:	Introduction
1:	Understanding the CSS Box Model
2:	▶︎ How to Use CSS Box Sizing
3:	How to Use CSS Margin
4:	How to Use CSS Padding
5:	How to Style CSS Borders