What is the difference between the CSS box-sizing values content-box and border-box?
Learn the difference between CSS box-sizing content-box and border-box, how each affects width, and why border-box makes layouts predictable.
Expected Interview Answer
box-sizing controls whether an element's declared width and height include padding and border. content-box (the default) applies the size to the content only, so padding and border add on top; border-box includes padding and border inside the declared size.
With content-box, setting width: 200px plus 20px padding and a 5px border yields a 250px rendered box, which makes layouts hard to predict. With border-box, that same declaration renders exactly 200px wide — padding and border eat into the content area instead of expanding the box. Because of this predictability, most projects apply border-box globally via a universal reset.
- border-box makes declared width equal rendered width
- Eliminates arithmetic when combining widths with padding
- Simplifies responsive and grid layouts
- Prevents accidental overflow from added padding
- content-box remains the spec default for backward compatibility
AI Mentor Explanation
content-box is like quoting a batter's height without pads, then strapping pads on so they suddenly take more room at the crease than the number suggested. border-box is quoting the full padded-up height, so whatever protective gear they add fits inside that stated figure and their footprint never surprises the umpire.
Step-by-Step Explanation
Step 1
Recall the default
content-box is the initial value; width and height size only the content area.
Step 2
Add padding and border
In content-box these are added outside the declared width, growing the rendered box.
Step 3
Switch to border-box
Set box-sizing: border-box so declared width includes padding and border.
Step 4
Observe the shrink
Content area shrinks to make room for padding and border while total width stays fixed.
Step 5
Apply globally
Use a universal *, *::before, *::after { box-sizing: border-box } reset for predictable layouts.
What Interviewer Expects
- Knows content-box is the default
- Can compute rendered width for both modes
- Understands border-box keeps declared width fixed
- Recognises the common global reset pattern
- Explains why border-box eases responsive layouts
Common Mistakes
- Thinking border-box changes the box model itself rather than what width measures
- Assuming margin is included in border-box (it is not)
- Forgetting content-box is the default and expecting fixed widths
- Applying border-box inconsistently, causing mixed sizing
- Believing box-sizing affects how backgrounds paint
Best Answer (HR Friendly)
“box-sizing decides whether the width you type includes the padding and border or not. content-box measures just the inside so padding makes the box bigger, while border-box counts everything within the stated width — which is why most developers switch everything to border-box for predictable layouts.”
Code Example
.default {
box-sizing: content-box; /* default */
width: 200px;
padding: 20px;
border: 5px solid #333;
/* rendered width = 200 + 40 + 10 = 250px */
}
.fixed {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
/* rendered width = exactly 200px */
}*, *::before, *::after {
box-sizing: border-box;
}Follow-up Questions
- Why do many CSS resets apply border-box to every element?
- Does box-sizing: border-box include margin in the declared width?
- How does border-box simplify percentage-based column widths?
- What happens to the content area when you add padding under border-box?
MCQ Practice
1. With box-sizing: border-box, width: 200px, padding: 20px, border: 5px, what is the rendered width?
border-box includes padding and border inside the declared width, so the box renders at exactly 200px.
2. Which is the default value of box-sizing?
content-box is the CSS default; width and height apply to the content area only.
3. Which layer is NOT included in the width under border-box?
border-box includes content, padding, and border, but margin always sits outside the declared width.
Flash Cards
What does content-box size? — The content area only; padding and border are added on top.
What does border-box size? — Content plus padding plus border, keeping declared width fixed.
Is margin part of border-box width? — No. Margin is always outside the declared width in both modes.
What is the common global box-sizing reset? — *, *::before, *::after { box-sizing: border-box; }