The Box Model
Every element is a box: content, padding, border and margin. Learn box-sizing, margin collapsing, display, sizing, overflow, borders, shadows and backgrounds.
Everything the browser draws is a box. A heading, a paragraph, a button, even a single word inside a link: each one sits in a rectangle made of four layers, the content, the padding around it, the border around that, and the margin outside. Once you can see those boxes, CSS stops feeling like guesswork. Most "why is this 20 pixels too wide?" and "where did this gap come from?" questions are box model questions.
This phase goes layer by layer. You'll learn how width is really measured (box-sizing), the strange but logical ways margins behave (auto margins, negative margins and margin collapsing), what the display property changes, how sizes are worked out from content or from the outside (min-content, max-content, fit-content, aspect-ratio), what happens when content doesn't fit (overflow and scrolling), and how to decorate boxes with borders, rounded corners, outlines, shadows, backgrounds and gradients.
Every example is live and most print the real measured sizes to the console, so you can change a number and check the browser's maths yourself. Keep DevTools open as you go: the box model diagram in the Elements panel is the single most useful CSS debugging tool there is. Positioning and layout (Phase 6), Flexbox (Phase 7) and Grid (Phase 8) all build on what you learn here.
Practise this phase
Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.