What Is box-sizing in CSS and How Does It Affect Layout?
Understand what box-sizing does in CSS, the difference between content-box and border-box, and why border-box is the standard modern reset choice.
Expected Interview Answer
box-sizing is a CSS property that controls whether an element's declared width and height include its padding and border (border-box) or exclude them (content-box, the default), which changes how big the rendered box actually is.
With the default content-box, width applies only to the content area, so padding and border add extra pixels on top of the declared size, which makes layouts unpredictable once you add spacing. Setting box-sizing: border-box makes width and height include padding and border, so the box you set is the box you get, which is why most modern stylesheets apply border-box globally with a universal selector reset.
- Predictable, WYSIWYG sizing for width and height
- Padding and border changes no longer break layouts
- Simplifies building grids and responsive columns
- Reduces need for manual width recalculation
- Standard practice in almost every modern CSS reset
AI Mentor Explanation
box-sizing is like deciding whether a batter's official strike rate includes only runs off the bat or also byes and leg byes tacked on afterward. content-box only counts the core runs and lets padding add extra outside the number, while border-box, the scorer's preferred method, folds everything into one final total so the declared figure is exactly what ends up on the board.
Step-by-Step Explanation
Step 1
Default is content-box
Without box-sizing set, width and height apply only to the content area; padding and border add on top.
Step 2
border-box includes padding and border
Setting box-sizing: border-box makes the declared width include padding and border, keeping the total box size fixed.
Step 3
Global reset pattern
Most teams apply *, *::before, *::after { box-sizing: border-box; } once at the top of the stylesheet.
Step 4
Percentage widths stay predictable
With border-box, a child at width: 50% keeps fitting even after you add padding, since padding no longer overflows the box.
Step 5
Inspect computed size in devtools
Browser devtools show both the content size and the full box size, which is the quickest way to confirm which mode is active.
What Interviewer Expects
- Explains the default content-box behavior clearly
- Explains what border-box changes
- Knows the universal box-sizing reset pattern
- Can explain why border-box avoids layout breakage
- Mentions devtools as a way to verify sizing
Common Mistakes
- Thinking box-sizing changes visual appearance rather than size calculation
- Forgetting that margin is never included in either box-sizing mode
- Assuming border-box is the browser default
- Not applying the reset to pseudo-elements
Best Answer (HR Friendly)
“box-sizing is a CSS setting that decides whether padding and border are counted inside an element's width or added on top of it. Most developers switch it to border-box so the size they set is the size they actually get, which makes building layouts far more predictable.”
Code Example
*, *::before, *::after {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 20px;
border: 2px solid #333;
/* With border-box, rendered width stays 300px total */
/* With content-box (default), rendered width becomes 344px */
}Follow-up Questions
- What is the CSS box model and what are its layers?
- Why do most CSS resets set box-sizing: border-box globally?
- Does box-sizing affect margin calculations?
- How does box-sizing interact with percentage-based widths?
- What happens if you mix content-box and border-box children in a flex layout?
MCQ Practice
1. What does box-sizing: border-box include in the declared width?
border-box includes content, padding, and border inside the declared width and height; margin is always excluded.
2. What is the default value of box-sizing in browsers?
Unless overridden, browsers use content-box, where width and height apply only to the content area.
3. Why do developers commonly apply box-sizing: border-box to *?
It keeps the rendered box size equal to the declared width/height even after adding padding or border, avoiding layout surprises.
Flash Cards
What does box-sizing: content-box do? — Width/height apply only to content; padding and border add extra size on top.
What does box-sizing: border-box do? — Width/height include padding and border, so the declared size is the final rendered size.
Is margin included in either box-sizing mode? — No, margin is always outside the box in both content-box and border-box.
What is the common global reset for box-sizing? — *, *::before, *::after { box-sizing: border-box; }