In the practice for Learn CSS/Box Model there appears to be an error in this exercise, as it accepts border-box, whereas the correct answer should be content-box.
Does ‘content-box’ include the, border-width?
Thank you for replying. So mdn web docs says:
content-boxgives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
According to this, the answer to your question is ‘yes’, which is what makes me think the right answer should be box-sizing: content-box; It seems to me that if box-sizing: border-box; then the width of the div element will be 140px.
Again. one might wish to think on this.
OK, I can see from your answers that I must be wrong, but I can’t see why, at least as far as the difference between content-box and border-box is explained by the course and elsewhere. My understanding is that the width of content-box is width + padding + border, wheras the width of border-box is just width. I still don’t see why padding and border-width are apparently being added to width to make the rendered width of the div 200 using border-box.
Go back to normal flow and basic definition of a block level element. The border and margin are both outside of that block, by default. This is a ‘content-box’. A ‘border-box’ includes the border-width in its size calculations, meaning there is less useable real estate in the container since it is constrained by the border (and padding, which question still needs to answered as pertains to ‘border-box’). See where this is going?
I am really grateful for your almost instant answers, but I am still confused.
Again mdn web docs says:
border-boxtells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
It seems to me that if you set box-sizing: border-width; then the width of the element will be 140px, and will include the border or padding, shrinking the size of the content element, as described above. I don’t see why the div would be 200px wide in this case.
Read the above MDN quote again. ‘border-box’ calculates usable real estate within the box boundaries. Border and padding eat up this space. ‘content-box’ (the default) allows containers to both stretch (due to padding) and put the border outside of the content box.
Bottom line, leave ‘padding’ until you are a professional at this stuff. It will only give you grief in the meantime.
<p> has a 1em top and bottom margin, and they are collapsing. If we want padding within their container, it is a simple matter of giving them a ‘1em’ margin right and left. Then we just have to put our content in P containers.
p {
margin: auto 1em;
}