Box Sizing

You will be able to choose and apply CSS box-sizing so width and height include or exclude padding and border predictably.

What it is

Every CSS box has content, padding, border, and margin. The box-sizing property controls what width and height measure. With content-box, the width applies only to the content area, and padding and border are added outside it. With border-box, the width includes the content, padding, and border.

Related terms include the CSS box model, computed width, layout overflow, and universal selector reset. Margin is not included in either sizing model.

Why it matters

• It makes component widths easier to predict, especially for cards, buttons, and form fields.
• It reduces unexpected overflow when padding or borders are added to fixed or percentage widths.
• It helps responsive layouts behave more consistently across browsers.
• It simplifies grid and flex layouts when elements need to fit inside a known total width.

Syntax or steps

The smallest useful pattern is a global reset that applies border-box to all elements and pseudo-elements.

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

Apply this near the top of your stylesheet. It changes the default sizing model from content-box to border-box for most layout work.

Example

<!doctype html>
<html>
<head>
<style>
*, *::before, *::after {
  box-sizing: border-box;
}

.demo {
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  background: #eee;
}
</style>
</head>
<body>
<div class="demo">This box is exactly 200px wide.</div>
</body>
</html>

Part-by-part explanation:

• The universal selector sets border-box for every element.
• ::before and ::after are included so generated content follows the same rule.
• The .demo element has width: 200px.
• Because of border-box, the padding and border are included inside that 200px.
• The content area becomes 150px wide: 200 minus 40px horizontal padding minus 10px horizontal border.

Common mistakes

• Forgetting pseudo-elements. If you only write *, some ::before or ::after boxes may still use content-box.
• Assuming margin is included. Margin always sits outside the box, even with border-box.
• Mixing sizing models. If some components use content-box and others use border-box, widths can become inconsistent.
• Adding large padding to percentage widths without checking the content area. With border-box, the total width stays fixed, but the usable content space shrinks.

When to use it

The closest alternative is content-box, which is the CSS default for most elements.

Use border-box for most modern layouts. Use content-box only when you specifically need padding and border to expand outside the declared width.

Practice

1. Guided exercise: Add the global border-box reset, then style a .card with width: 300px, padding: 16px, and border: 2px solid #000. Expected total rendered width: 300px.
2. Challenge: Remove the reset and set box-sizing: content-box on the same card. What is the total rendered width? Hint: add the width, horizontal padding, and horizontal border.

Quick check

Question: If an element has width: 100px, padding: 10px, border: 2px, and box-sizing: border-box, what is its total width?

Answer: 100px. The padding and border are included inside the declared width.

Summary

Box sizing decides whether width and height describe only the content or the full visible box including padding and border.

Using border-box globally is a practical default because it makes layout widths easier to predict.