What Is the CSS Box Model?
Learn the CSS box model — content, padding, border, margin — and how box-sizing: border-box changes rendered element size.
Expected Interview Answer
The CSS box model describes every rendered element as a set of nested rectangular layers — content, padding, border, and margin — and how those layers combine determines an element’s total rendered size on the page.
From the inside out, the content box holds the actual text or child elements, padding adds transparent space around the content inside the border, the border wraps around the padding, and margin is transparent space outside the border separating the element from its neighbors. By default (content-box, the CSS initial value), width and height apply only to the content box, so padding and border are added on top, meaning setting width: 200px with 20px padding and a 2px border actually renders at 244px wide. Setting box-sizing: border-box changes this so width and height include padding and border, making the declared size the true rendered size, which is why most modern resets apply border-box globally. Margins between adjacent block-level elements can also “collapse,” where the larger of two touching vertical margins wins instead of both being added together.
- Explains exactly why an element renders larger than its declared width/height
- box-sizing: border-box makes layout math predictable across the whole page
- Clarifies the visual separation of content, padding, border, and margin
- Explains margin collapsing behavior between adjacent block elements
AI Mentor Explanation
The box model is like a cricket pitch layout: the actual playing strip is the content, the surrounding safety turf is the padding, the boundary rope is the border, and the empty space between the rope and the stands is the margin. If you measure “pitch length” as only the strip but then add turf and rope on top, the total ground footprint is bigger than the strip measurement alone. Declaring the boundary rope position directly, including the turf inside it, is like border-box — the number you set is the true total. That layered, inside-out measurement is exactly how CSS computes an element’s rendered size.
Step-by-Step Explanation
Step 1
Content box renders first
Text, images, or child elements occupy the innermost content area sized by width/height.
Step 2
Padding adds inner spacing
Transparent space inside the border, pushing content away from the edge, and included in the element’s background.
Step 3
Border wraps the padding
A visible (or invisible) line around the padding, contributing to total rendered size under content-box.
Step 4
Margin adds outer spacing
Transparent space outside the border separating the element from siblings, subject to margin collapsing rules.
What Interviewer Expects
- Correct ordering of content, padding, border, margin from inside out
- Ability to compute total rendered width given content-box defaults
- Clear explanation of what box-sizing: border-box changes
- Awareness of vertical margin collapsing between block elements
Common Mistakes
- Forgetting that width/height apply only to content under the default content-box
- Confusing padding (inside border, part of background) with margin (outside border, transparent)
- Not knowing border-box is why "* { box-sizing: border-box }" resets are so common
- Overlooking margin collapsing when reasoning about vertical spacing between elements
Best Answer (HR Friendly)
“The CSS box model is the idea that every element on a page is really a box made of layers — the content in the middle, padding around it, a border around that, and margin as the outer spacing. Understanding this explains why an element can look bigger than the width you set, and why switching to border-box sizing makes layout math much more predictable.”
Code Example
.content-box {
box-sizing: content-box; /* default */
width: 200px;
padding: 20px;
border: 2px solid black;
/* rendered width = 200 + 20*2 + 2*2 = 244px */
}
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
/* rendered width = exactly 200px, padding/border eat into content */
}
*, *::before, *::after {
box-sizing: border-box; /* common global reset */
}Follow-up Questions
- What is margin collapsing and when does it happen?
- How does box-sizing: border-box change the width calculation?
- Does padding participate in an element’s background color rendering?
- How do negative margins interact with the box model?
MCQ Practice
1. Under the default content-box, what does the “width” property size?
By default, width/height apply only to the content box; padding and border are added on top.
2. What does box-sizing: border-box change?
border-box makes the declared width/height the total size, with padding and border eating into it.
3. Which layer of the box model is transparent and separates elements from their siblings?
Margin is the outermost transparent spacing layer between an element and neighboring elements.
Flash Cards
Order of box model layers, inside out? — Content, padding, border, margin.
What does box-sizing: border-box do? — Makes width/height include padding and border, so declared size is the true size.
What is margin collapsing? — Adjacent vertical margins between block elements merge to the larger value instead of summing.
Default box-sizing value? — content-box.