Measure the four layers
JavaScript reads the sizes the browser really used. Change the padding or border and run again: the numbers follow the formula.
Every element the browser draws is a rectangle made of four layers: the content, the padding around it, the border around that, and the margin outside it.
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 .badge that is 120px wide, has 8px of padding on top and bottom and 16px on the sides, a 2px solid navy border and 12px margin on every side. Log its offsetWidth.
Give a box padding: 5px 10px 15px and log its computed padding-left. Explain the result.
Explain it without notes
Name the four parts of the CSS box model from the inside out and say what each is for.
A box has width: 300px; padding: 10px 20px; border: 2px solid; margin: 15px. How wide is it on screen, and how much horizontal space does it take in the layout?
Which parts of the box show the element's background, and why does it matter for buttons?
How do you find out where an unexpected gap comes from?
Preview
Console
Nothing logged yet.Expected console output
content width (CSS width): 200px
clientWidth = content + padding: 240
offsetWidth = content + padding + border: 250
space taken with margins: 310