What is Box-Sizing?
The box-sizing property controls how the total width and height of an element is calculated -- whether padding and border are included inside or added on top of your declared size.
TL;DR
- 1.
content-box(default): width/height = content only. Padding and border are added on top. - 2.
border-box: width/height = content + padding + border. The element is exactly the size you set. - 3.Every modern CSS reset applies
*, *::before, *::after { box-sizing: border-box }globally. - 4.Margin is never included in box-sizing calculations, regardless of the value.
Simple Explanation
Imagine you order a picture frame that's advertised as "20 inches wide."
With content-box, the 20 inches is just the glass area. The wooden frame border adds more width on each side, so the total frame ends up being 24 inches wide. Surprising and annoying when you're trying to fit it on your wall.
With border-box, the 20 inches includes the wooden frame. What you measure is what you get. The glass inside is a little smaller, but the total width is exactly 20 inches -- which is what you wanted.
Visual Comparison
Both boxes below have width: 200px and padding: 20px. Notice how the total size differs.
content-box (default)
Total width: 200 + 20 + 20 = 240px
border-box
Total width: 200px (padding is inside)
How to Use It
The universal reset (recommended)
*, *::before, *::after {
box-sizing: border-box;
}Add this at the top of your stylesheet. It applies border-box to every element, including pseudo-elements. This is included in every major CSS reset and framework (Tailwind, Bootstrap, Normalize.css).
Inheritable version (safer for third-party widgets)
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}This version lets you override box-sizing for specific components (like a third-party widget that expects content-box) by changing it on the wrapper.
Common Mistakes
Don't
/* Forgetting the reset and wondering
why a 50% + 50% layout overflows */
.left { width: 50%; padding: 20px; }
.right { width: 50%; padding: 20px; }
/* Total: 50% + 40px + 50% + 40px
= 100% + 80px -- overflow! */Do
* { box-sizing: border-box; }
.left { width: 50%; padding: 20px; }
.right { width: 50%; padding: 20px; }
/* Total: exactly 50% + 50% = 100% */Don't
/* Thinking border-box includes
margin in the width */
.box {
box-sizing: border-box;
width: 200px;
margin: 20px;
/* Total space = 240px, not 200px
Margin is always outside. */
}Do
/* Remember: border-box includes
padding + border, NOT margin */
.box {
box-sizing: border-box;
width: 200px; /* padding + border
are inside this 200px */
margin: 20px; /* always outside */
}
See any element's box model instantly
Frontend Hero's CSS Scanner shows padding, border, margin, and box-sizing for any element with one click. Visualize the box model on any website.
Try CSS Scanner →Browser Support
box-sizing is supported in all browsers including IE8+, with over 99% global coverage. No vendor prefixes are needed.
Related Tools
Frequently Asked Questions
With content-box (the CSS default), width and height only apply to the content area. Padding and border are added on top, making the element larger than the width you set. With border-box, width and height include padding and border, so the element is exactly the size you specify. border-box is far more intuitive for layout work.
Because content-box (the default) is counterintuitive. If you set width: 200px and add 20px padding, the element becomes 240px wide -- not 200px. This causes layout math headaches constantly. border-box makes width mean 'total width including padding and border,' which matches how designers and developers think about sizing.
No. box-sizing only controls whether padding and border are included in width/height. Margin is always outside the element's box regardless of the box-sizing value. This is true for both content-box and border-box.
For almost all practical purposes, yes. The CSS community overwhelmingly recommends applying box-sizing: border-box globally via a reset. The only exception might be when you're maintaining legacy code that relies on content-box behavior, or when integrating third-party widgets that assume content-box.
CSS Glossary
What is Flexbox?
One-dimensional layout model
What is CSS Grid?
Two-dimensional layout system
What is Z-Index?
Stacking order and contexts
What is CSS Specificity?
How browsers resolve conflicts
What is the CSS Cascade?
Rule priority and inheritance
What is Box Shadow?
Add depth with shadow effects
What is a CSS Reset?
Normalize browser defaults
What is Tailwind CSS?
Utility-first CSS framework
What is Responsive Design?
Adapt layouts to any screen