With box-sizing: border-box, a width: 200px element with 20px padding and 2px border renders…
Options
- 244px wide
- 200px wide total (Correct option)
- 220px wide
- 180px wide
Answer
200px wide total
Why
Every element is a box: content + padding + border (+ margin outside).
With the default content-box, width applies only to the content, so the box is 200 + 2×20 + 2×2 = 244px.
With border-box, width includes padding and border, so the box is exactly 200px. Most projects set * { box-sizing: border-box } because it is easier to reason about.
Remember
border-box: width includes padding and border.