Am I misinterpreting the question? With content-box, wouldn’t the full size of the element get bigger when you add padding? (Making the rendered width 220px) I checked https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing and it seems to confirm that the answer is border-box, but the quiz says I’m wrong. Please help me understand!
In your example, with border-box, the rendered width if you inspected the element would be 160px. This is because padding and margin are included in the width, so the inner content width is reduced to fit the total 200px.
With content-box, the width does not include the padding and border. So the width would remain 200px, and the 20px of padding would be added to the outside of that 200px.
For a visual example, you could test it yourself by making 2 identical divs - width 200px and padding 20px, and make one content-box and the other border-box. Add a colour to the background and padding of each and see how they look different.
1 Like
It just occurred to me that one might think “but the width of the element is 200px when it’s border-box!?” - the question is asking “what is the width of the element” - and when you inspect it in the DOM the reported width is 160px. Does that make sense?
1 Like
I also have doubts about this question. It is asking about the width of the element – not its child.
If you look at the screenshot, the rendered width of the element is the same as the width attribute in the stylesheet if box-sizing is set to border-box. So I think the question is at least equivocal.
2 Likes
So as we discussed on Discord - we think there is a problem with the question. My above replies are incorrect.
The width of the div does in fact remain 200px in both cases, with border-box and content-box - The size of the div does increase to 240px with content-box. The width of the content does shrink to 160px, but the div element remains 200px wide.
However, if someone can explain why the question does make sense, I would appreciate it!
1 Like