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 determines what part of an element’s size the width refers to. When you use border-box, the width you set includes the content, padding, and border. That means the element’s total outer width stays exactly what you specify, even if you add padding or borders. For example, if you set width: 200px and then add 20px of padding on each side and a 2px border on each side, the total width remains 200px; the content area becomes smaller to accommodate the padding and borders. This is different from the default behavior, where the width applies only to the content area and padding and borders add to the total width, making the element wider than the value you specified.

Box-sizing determines what part of an element’s size the width refers to. When you use border-box, the width you set includes the content, padding, and border. That means the element’s total outer width stays exactly what you specify, even if you add padding or borders. For example, if you set width: 200px and then add 20px of padding on each side and a 2px border on each side, the total width remains 200px; the content area becomes smaller to accommodate the padding and borders. This is different from the default behavior, where the width applies only to the content area and padding and borders add to the total width, making the element wider than the value you specified.