Given: .box { box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid; } How wide is the element's content area, and how wide is its border box?

الشرح

With box-sizing: border-box, the declared width describes the border box, so the border box is exactly 300px. Everything else is taken out of that: 300 − 20 − 20 (padding) − 5 − 5 (borders) = 250px of content. The 350px answer is the result you would get under the initial value content-box, where width sets the content area and padding and border are added outside it. The 260px answer subtracts the padding but forgets the borders. Margins are never part of either box.