Using box-sizing: border-box on an element with width: 200px, how do padding and border affect the total width and the content width?

Using box-sizing: border-box on an element with width: 200px, how do padding and border affect the total width and the content width?

• A. The width remains 200px; padding and border are included in that width; content width becomes 200 - padding - border.
• B. The width remains 200px; padding is added outside the width.
• C. The width increases to accommodate padding.
• D. The content width remains 200.

Answer: (A)

With box-sizing: border-box, the width you set includes padding and border. So having width: 200px means the element’s total rendered width stays 200px; the space taken by padding and borders sits inside that 200px, which reduces the space available for the content. The content width becomes 200px minus the horizontal padding and minus the horizontal border widths. For example, if there’s 10px of padding on each side and 2px border on each side, the content width would be 200 − 20 − 4 = 176px. The padding and border are not added to the width; they are contained within it.

With box-sizing: border-box, the width you set includes padding and border. So having width: 200px means the element’s total rendered width stays 200px; the space taken by padding and borders sits inside that 200px, which reduces the space available for the content. The content width becomes 200px minus the horizontal padding and minus the horizontal border widths. For example, if there’s 10px of padding on each side and 2px border on each side, the content width would be 200 − 20 − 4 = 176px. The padding and border are not added to the width; they are contained within it.