The Box Model
Every HTML element is a box! The CSS box model has four layers: content (the actual text/image), padding (space inside the border), border (the line around it), and margin (space outside the border). Understanding this is key to spacing elements correctly. Use box-sizing: border-box so padding does…
Appy Says…
Why is there mystery space around your element? Why does adding padding make your layout break? The answer is almost always the box model. Understanding this one concept solves 80% of beginner CSS layout puzzles.
What is the CSS Box Model?
Every HTML element is a rectangular box made of four layers, from inside out: content → padding → border → margin.
- •Content — the actual text/image area (set by
widthandheight) - •Padding — space inside the border (between content and border)
- •Border — the visible outline:
border: 2px solid black - •Margin — space outside the border (between this element and neighbours)
- •Default:
widthonly measures content — padding and border are added ON TOP - •Fix:
box-sizing: border-box—widthincludes padding and border
Think of it like a Minecraft item in a chest
The item is the content. The gap around it inside the slot is padding. The slot border is the border. The gap between adjacent slots is margin. Change any layer and the space the element takes up changes.
How It Works
- •1. Content box:
width: 200px; height: 100px; - •2. Padding adds space inside:
padding: 20px;— total visual width becomes 240px (default) - •3. Border adds stroke:
border: 2px solid;— total becomes 244px - •4. Margin pushes other elements away:
margin: 10px; - •5. Set globally:
*, *::before, *::after { box-sizing: border-box; } - •6. With
border-box,width: 200pxalways means 200px total — predictable layouts
Real-World Examples
- •Card component:
padding: 24pxgives breathing room around the content - •Button:
padding: 12px 24pxmakes it larger without changing font size - •Spacing between sections:
margin-bottom: 48px - •Every major CSS framework (Tailwind, Bootstrap) applies
border-boxglobally first
Key Facts
- •The original CSS box model (
content-box) is considered a design flaw —border-boxis the modern standard - •Margin collapse: vertical margins between block elements merge — the larger one wins (not both added)
- •Inline elements (like
<span>) ignorewidth/heightand vertical margin - •
outlineis drawn outside the border but doesn't affect layout (doesn't take up space)
Watch Out!
If you don't set box-sizing: border-box, adding padding to a fixed-width element makes it overflow its container. Set it globally at the top of every stylesheet: *, *::before, *::after { box-sizing: border-box; }.
Remember
content → padding → border → margin. Always use box-sizing: border-box globally. Padding is inside; margin is outside.
What You Learned
- •Every element is a box: content + padding + border + margin
- •
box-sizing: border-boxmakes width predictable — always set it globally - •Unlocks: predictable layouts, card design, button sizing, spacing control
Key Facts
- →The original CSS box model (
content-box) is considered a design flaw —border-boxis the modern standard - →Margin collapse: vertical margins between block elements merge — the larger one wins (not both added)
- →Inline elements (like
<span>) ignorewidth/heightand vertical margin - →
outlineis drawn outside the border but doesn't affect layout (doesn't take up space)
Real-World Examples
Remember
content → padding → border → margin. Always use box-sizing: border-box globally. Padding is inside; margin is outside.
Quick Quiz
What is padding?