Margin vs padding is one of the most common decision points we see. Here is the honest breakdown.
The short version#
Margin is space OUTSIDE the box (collapses, transparent); padding is space INSIDE (never collapses, carries background).
Point by point#
| Aspect | Analysis |
|---|---|
| Background | Padding shows the element background; margin never does |
| Collapsing | Vertical margins merge; padding never does |
| Hit area | Padding enlarges clickable area; margin pushes neighbors |
| Rule of thumb | Spacing from siblings → margin; breathing within a surface → padding |
Bottom line#
Pick based on your constraint, not ideology — and remember the comparison pages link to hands-on recipes so you can verify the claim in your own project within minutes.
Related comparisons#
comparisons/index|All comparisons
