The 0.25rem Increment System
Stop guessing pixel values. The entire spacing system is built on 0.25rem (4px) increments: 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4 rem. That's your complete toolkit.
Why rem? Because it scales with the user's font size preference. And why 0.25rem steps? Because it's enough granularity for any UI without giving you too many choices. Tailwind CSS uses this exact system — that's why designs built with it look consistent.
If you're ever stuck choosing between two spacing values, pick the larger one first and decrease if it feels too loose. Starting big is easier than starting tight.
The Grouping Principle
The single most important spacing rule: related items should be closer together than unrelated items. This is Gestalt proximity — our brains automatically group things that are near each other.
In practice: the gap between a heading and its body text should be smaller than the gap between that section and the next section. Inner padding should be smaller than outer margins. Always.
.container {
padding: 1rem 1.5rem;
gap: 1.25rem;
}
.card-inner {
gap: 0.75rem;
}Key rule: inner spacing should always be smaller than outer spacing. Group related items with tight gaps, separate sections with larger ones.
Padding: Vertical vs Horizontal
Horizontal padding should almost always be larger than vertical padding. A button with padding: 0.5rem 1rem looks natural. padding: 1rem 0.5rem looks crushed.
For cards and containers, a common ratio is 1.5x-2x more horizontal than vertical. So if your card has 1.5rem vertical padding, use 2rem-3rem horizontal. This accounts for how we read — left to right, needing more breathing room horizontally.
For touch targets, ensure at least 44px (2.75rem) minimum height on interactive elements. This is a WCAG requirement, not just a suggestion.
Optical Weight and Visual Balance
Mathematically equal spacing doesn't always look equal. Large elements (headings, images) create more visual weight, so they need more space around them to feel balanced.
A 32px heading with 1rem margin-bottom looks crowded. Give it 1.5rem or 2rem. Meanwhile, a small caption with 1rem margin feels like too much. Context matters — adjust spacing to what looks right, not just what the grid says.
When in doubt, zoom out. Squint at your screen or look at it from across the room. Spacing issues become obvious when you can't read the actual content.
Key Takeaways
Related Guides & Tools
How to Fix Boring UIs with Depth
Create visual depth with layered shades, shadows, and highlights.
GuideThe Golden Rule: Don't Make Me Think
Master the principles of effortless, convention-driven UI design.
GuideWeb Animations That Actually Matter
Master CSS transitions, timing functions, and animations that improve UX.
GuideTypography: The 80% of UI Design
Master type scales, weight, and color — the fundamentals of UI typography.
GuideHow to Pick the Right Colors for UI
Learn the HSL color system, build full palettes, and master dark/light mode.
Want the full picture?
This free tool checks one slice of UX.
Picopi audits your entire page — issues, screenshots, and fixes — web or mobile.