Margin
Space outside an element that separates it from neighbouring elements.
Plain English
Margin is the invisible gap outside a box that pushes other elements away. While padding adds space inside (filled by the background colour), margin adds space outside — the background does not extend into it. It is how you separate a heading from the paragraph below it or keep a sidebar from touching the main content.
Technical
Margin is outside the border edge in the CSS box model. Vertical margins between block elements collapse — the larger value wins and only one gap is rendered. Negative margins can pull elements closer or create overlaps. auto margins on a block element with a fixed width horizontally centre it.
Live Demo
margin: 0 — labels colliding
Step 1
Choose your primary color palette and establish brand tone.
Step 2
Define your type scale — heading sizes, body, and captions.
Step 3
Build component tokens for spacing, radius, and shadows.
margin: 16px 0 — breathing room
Step 1
Choose your primary color palette and establish brand tone.
Step 2
Define your type scale — heading sizes, body, and captions.
Step 3
Build component tokens for spacing, radius, and shadows.
Vertical margin separates elements so each idea has its own visual territory.
Usage
✓ Good usage
Use margin-bottom: 32px between cards in a feed to give each item visual separation without clutter.
✗ Bad usage
Applying padding where margin is needed (e.g. padding-bottom on a heading) causes the heading's background to extend into the supposed gap.
Recommended values
- 4–8px between tightly related elements (icon + label)
- 16–24px between components in a list
- 32–48px between distinct sections
- 64–96px between major page sections
Common mistakes
- Forgetting that vertical margins collapse between block siblings.
- Using margin to create internal spacing when padding is the right tool.
- Mixing margin and padding to achieve spacing — pick one for each purpose.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add 32px margin below each section heading and 8px margin between the icon and the label.