Box-Sizing: Content-Box vs Border-Box
Understand how box-sizing changes how width and height calculations include padding and border.
Box-Sizing: Content-Box vs Border-Box is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The box-sizing Problem
By default, CSS sets width on the content area only. Adding padding or border increases the element's actual rendered size, which is confusing and error-prone.
/* Content-box: rendered width = 200 + 20 + 20 + 2 + 2 = 244px */
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
}content-box (Default)
box-sizing: content-box is the default. width and height apply to the content only. Padding and border are added on top, growing the element beyond the set size.
border-box
With box-sizing: border-box, width and height include content + padding + border. The element stays exactly the declared size regardless of padding or border.
/* Border-box: rendered width = exactly 200px */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
/* Content area = 200 - 20 - 20 - 2 - 2 = 156px */
}The Universal border-box Reset
Apply border-box globally using the universally recommended reset:
*, *::before, *::after {
box-sizing: border-box;
}Why inherit Instead of *
An alternative pattern allows components to override box-sizing if needed:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}Percentage Width + Padding
The main practical benefit of border-box is with percentage widths. A width: 50% element with 20px padding stays at exactly 50% of its parent without overflow.
.col {
box-sizing: border-box;
width: 50%;
padding: 20px; /* no overflow! */
}border-box Does Not Include margin
Even with border-box, margin is not included in the declared width. Margins always add space outside the element on top of its set dimensions.
History: Why Is content-box the Default?
Historically browsers disagreed on the box model. The W3C standardized content-box but IE used border-box. Modern CSS defaults to content-box for W3C compliance, but virtually all projects override it to border-box.
Inspecting Box Model in DevTools
In Chrome DevTools, the Elements panel shows a box model diagram with exact content, padding, border, and margin dimensions. This is the fastest way to debug sizing issues.
Grid and Flexbox Use border-box Internally
CSS Grid and Flexbox always size tracks and items using border-box semantics, regardless of the element's own box-sizing setting. This keeps their sizing math predictable.
min/max with border-box
min-width, max-width, min-height, and max-height work the same way as width — they include padding and border when border-box is active.
Quick Check
With box-sizing: border-box, an element declared as width: 300px; padding: 30px; has a content area width of:
Recap
box-sizing: border-box includes padding and border in the declared width, preventing unexpected size growth. Apply it globally with *, *::before, *::after { box-sizing: border-box }. Margins are never included in either box model.
Frequently asked questions
Is the “Box-Sizing: Content-Box vs Border-Box” lesson free?
Yes — the full text of “Box-Sizing: Content-Box vs Border-Box” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Box-Sizing: Content-Box vs Border-Box”?
Understand how box-sizing changes how width and height calculations include padding and border. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Box-Sizing: Content-Box vs Border-Box” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Understanding Width Height Margin and Padding
- Border Styles Width and Color
- Box-Sizing: Content-Box vs Border-Box
- Outline and Box-Shadow