CodePark/ questions / Box model & sizing
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Box model & sizing

With box-sizing: border-box, what is the width of the content area?

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
150px

150px is right. border-box makes width include the padding and the border. So the box stays 200px wide, and the content gets 200 − 40 − 10 = 150px.

200px is the tempting wrong answer. That is the whole box, not the content. This predictable sizing is why many CSS resets apply box-sizing: border-box to every element.