What does box-sizing: border-box do?

What does box-sizing: border-box do?

• A. Width is for content only.
• B. Width includes padding and border.
• C. It changes margin.
• D. It has no effect.

Answer: (B)

Box-sizing: border-box changes how the width is calculated so the value you set for width includes both padding and border in that total. In the normal behavior, width applies to the content area and padding plus border add to the overall size, which can make the element wider than the width you specified. For example, with width: 200px, padding: 20px, and border: 5px, border-box keeps the total width at 200px, so the actual content area becomes smaller (200 minus padding and border on both sides). Without border-box, the total width would be 250px (200 content plus 40 padding plus 10 border). It doesn’t affect margins, which sit outside the box model altogether. This makes sizing more predictable in layouts.