Explain the CSS box model. What is the difference between content-box and border-box?
What the interviewer wants to hear
- Every element is a box of content, padding, border and margin
- content-box: width applies to content only
- border-box: width includes padding and border
- border-box makes layouts easier to reason about
- Margins are outside the box and can collapse vertically
Model answer
Every element in CSS is drawn as a rectangular box with four layers: the content in the middle, then padding, then border, and finally margin outside. With the default box-sizing: content-box, the width and height you set apply only to the content, so padding and border are added on top. A 200px box with 20px padding becomes 240px wide. With box-sizing: border-box, the width includes padding and border, so the box stays 200px and the content shrinks. Most teams set border-box globally because it makes sizes predictable, especially in responsive grids. Margin is never part of the width; it is space between boxes, and vertical margins between block elements can collapse into one margin.
Can you answer it under time pressure?
Take a timed easy round and get scored on every answer.
More easy Frontend Developer questions
- What is the difference between var, let and const in JavaScript?
- What is semantic HTML and why does it matter?
- In React, what is the difference between props and state?
- How do you make a web page responsive for mobile, tablet and desktop?
- What is the difference between Flexbox and CSS Grid, and when would you use each?
- What is a closure in JavaScript? Give a practical example of where you use one.
- How do you make a form accessible?
- A button on a page does not work when clicked. How would you use browser DevTools to find the problem?
- What is a Promise, and how does async/await relate to it?