CSS · Layout and visual systems
Explain the CSS box model.
Short answer
Every element generates a box made of content, padding, border and margin. width and height apply to the content box by default; box-sizing: border-box makes them include padding and border.
The box model describes the layers around an element. Content is the innermost area, padding sits between content and border, the border wraps padding, and margin is space outside the border. Backgrounds paint under content, padding and border, but not margin.
.card {
box-sizing: border-box;
width: 20rem;
padding: 1rem;
border: 1px solid #d1d5db;
margin: 1rem auto;
}How sizing changes
- content-box is the default: width sets only the content width
- border-box includes padding and border in the declared width and height
- Margin is never included in width, even with border-box
- Padding and border add to the visual size under content-box
A common reset is to set box-sizing: border-box on all elements and pseudo-elements. That makes widths predictable, especially when components add padding. You still need to account for margin separately.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between content-box and border-box?
- 2Does border-box include margin?
- 3What does the universal box-sizing reset do?
- 4How do padding and border affect width under content-box?
Say it in the interview
The box model has four layers: content, padding, border and margin. By default width and height size only the content, so padding and border make the box bigger. I usually set border-box globally so declared widths include padding and border. Margin is always outside the width, which is a common source of overflow and spacing confusion.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.