CSS Spacing Calculator
Online CSS spacing calculator that generates a spacing scale from a base unit and scale type, previews tokens, and exports CSS variables and Tailwind spacing config.
Calculator Settings
Spacing Scale Preview
CSS Variables
:root {
--spacing-md: 12px;
}Tailwind Config
spacing: {
'md': '12px'
}Examples
Using CSS Variables
.button {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}Using Tailwind
<div class="p-md mb-lg"> Content </div>
Guide
CSS Spacing Calculator generates consistent spacing tokens and exports CSS variables and Tailwind spacing config, helping teams keep predictable whitespace in layouts and component libraries.
What Is a Spacing System
A spacing system standardizes padding, margin, and layout gaps with semantic steps (xs/sm/md/lg). It reduces random one-off values and makes design reviews and frontend handoff more consistent.
Scale Types
Linear
Increases by fixed multipliers (0.5x, 1x, 1.5x, 2x). Easy to reason about and maintain for most products.
Fibonacci
Follows 1, 1, 2, 3, 5, 8... for a more organic rhythm, often used in design systems that emphasize visual cadence.
Powers of 2
Scales as 1, 2, 4, 8, 16... with bigger jumps, useful for strong hierarchy and wide-screen layouts.
Choosing a Base Unit
- 4px: Finer control for dense UI and frequent micro adjustments.
- 8px: A common default that fits the 8px grid and works well for most web dashboards and products.
- 16px: More generous whitespace for mobile-first or content-heavy layouts.
How To Use
- Pick a base unit (e.g. 8px) as the foundation.
- Select a scale type and review the preview values.
- Copy the exported CSS variables or Tailwind spacing config.
- Paste them into your styles or tailwind.config.js and use tokens consistently.
Best Practices
- Use tokens instead of ad-hoc px values across pages.
- Prefer semantic names (xs/sm/md/lg) for easier collaboration.
- Define spacing together with typography and grid rules for better harmony.
- Centralize spacing tokens in your component library to reduce repeated decisions.
FAQ
Why use a spacing system?
A consistent spacing system improves visual coherence and reduces rework from random spacing choices. It also speeds up review and QA.
Can I use the Tailwind output directly?
Yes. Paste the output into tailwind.config.js (preferably under theme.extend.spacing) and you can use classes like p-md and m-lg.
How do I avoid conflicts with Tailwind defaults?
Use theme.extend.spacing to extend safely. If you need to override defaults, keep a clear team convention and manage tokens centrally.
Privacy
This tool does not upload your inputs or results. All calculations, previews, and exports run locally in your browser.