← Back to Chapters

CSS box-sizing

? CSS box-sizing

⚡ Quick Overview

The box-sizing property in CSS controls how the total width and height of an element are calculated. It decides whether the specified width and height apply only to the content, or also include padding and borders.

  • content-box (default) → width/height apply only to the content.
  • border-box → width/height include content + padding + border.
  • Makes layouts more predictable, especially in responsive designs.

? Key Concepts

  • Box model: Elements are built from content, padding, border, and margin.
  • content-box: Padding and border are added on top of the width/height.
  • border-box: Padding and border are included inside the width/height.
  • Consistency: Using border-box globally simplifies layout math.

? Comparison Table

Value Includes Padding? Includes Border? Typical Use Case
content-box ❌ ❌ Default box model; precise content sizing.
border-box ✅ ✅ Modern layouts; predictable element sizes.

? Syntax of box-sizing

Controls how the browser calculates an element’s width and height.

? View Code Example 
/* Syntax for the box-sizing property */
box-sizing: content-box | border-box | inherit;

Commonly used values:

  • content-box → default behavior in browsers.
  • border-box → recommended for most modern layouts.
  • inherit → inherits the value from the parent element.

⚙️ Code Example: content-box (Default)

Here, the width only applies to the content. Padding and border are added on top of it.

? View Code Example 
/* Element sized using the default content-box model */
.content-box-example {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}

? Live Output / Explanation

The final element width is calculated as:

  • Content width: 200px
  • Horizontal padding: 20px + 20px = 40px
  • Horizontal border: 5px + 5px = 10px

Total width = 200 + 40 + 10 = 250px

? Code Example: border-box

With border-box, the specified width includes content, padding, and border.

? View Code Example 
/* Element sized using the border-box model */
.border-box-example {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}

? Live Output / Explanation

The total width remains exactly 200px:

  • The browser squeezes content width to make room for padding and border inside the 200px.
  • This prevents unexpected overflow and keeps layouts aligned.

? Why Use border-box?

Using box-sizing: border-box avoids layout issues when padding and borders increase the element’s size unexpectedly. It is especially useful in responsive designs and is widely recommended for consistent box sizing across your website.

  • Makes layout math easier and more intuitive.
  • Helps keep columns and cards aligned in grid or flex layouts.
  • Reduces accidental overflows when adding padding or borders later.

? Tips & Best Practices

  • Apply box-sizing: border-box globally for consistent sizing.
  • Use it in your CSS reset so all elements behave predictably.
  • Be mindful when mixing elements with different box-sizing values.

Common global pattern:

? View Code Example 
/* Apply border-box sizing to every element on the page */
* {
box-sizing: border-box;
}

? Try It Yourself / Practice Tasks

  • Create two boxes with the same width but different box-sizing values and observe the difference.
  • Use box-sizing: border-box to build a card layout that fits exactly inside a 300px wide container.
  • Set padding of 30px on a box with content-box and border-box; compare their rendered widths.
  • Add a global rule * { box-sizing: border-box; } and see how it affects an existing layout.
  • Open your browser’s developer tools and inspect how width is calculated with and without box-sizing applied.