The overflowing input, fixed by the universal reset
The first input pokes 24px past the card's content edge. Delete .old's rule and add the universal reset at the top to fix both.
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 input: 324
border-box input: 300