content-box vs border-box
Same width, padding and border. Only box-sizing differs, and so does every number.
box-sizing decides what width and height measure: only the content (content-box, the default) or the whole box up to the border (border-box), which is why almost every site sets border-box everywhere.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a .panel that is exactly 280px wide on screen with 24px padding and a 3px border, using border-box. Log its offsetWidth and its content width (clientWidth minus the padding).
Write a reset so that every element inherits box-sizing from the root, then make one .legacy wrapper use content-box for itself and all its children. Log the box-sizing of a <p> inside .legacy.
Explain it without notes
What is the difference between content-box and border-box?
Why do most stylesheets set box-sizing: border-box on everything, and what does the usual reset look like?
Does box-sizing affect margins? Explain with an example.
Why might you prefer the inherit version of the reset?
Preview
Console
Nothing logged yet.Expected console output
content-box: outer 248px, content 200px
border-box: outer 200px, content 152px