Styla saysThe box model: every element is content + padding + border + margin, nested like an onion.
An element's rendered size is its content box plus padding plus border (margin sits outside). By default width sets just the content box, so padding and border make the element bigger than the width you set — the classic source of layout math headaches.
Power-ups you unlock
Layers: content → padding → border → margin
Default width = content box only
Padding + border add to the rendered width
Margin adds space, not element size
The Specificity Sphinx attacks — common mistakes
Assuming width includes padding/border (it doesn’t by default)
Layout breaking when you add padding to a fixed-width box
Confusing margin (outside) with padding (inside)
Boss battleSet a box to width 200px with 20px padding and a border; measure the actual width in DevTools.