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

How wide is the rendered box (border edge to border edge)?

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}
250px

250px is right. With content-box, width sets only the content area. So the border box is 200 + 2×20 padding + 2×5 border = 250px.

270px is the tempting wrong answer, because it adds the margin. Margin sits outside the border, so it is not part of the box's width. 200px is wrong because it forgets the padding and the border.