Spacing Scales: Stop Guessing Your Padding
Random gaps make layouts look restless. One base unit and one multiplier give you a small set of gaps to reuse everywhere.
What is the Spacing Scale Calculator?
Enter a base spacing unit and a multiplier, and the tool generates a stepped scale you can use for padding, margins, and gaps. Consistent spacing steps keep a layout feeling orderly instead of patched together.
How to use it
- Enter a base spacing unit in pixels.
- Enter a multiplier.
- Click Build Spacing Scale.
Worked example
With a 4 px base and a 2x multiplier, the scale runs 4, 8, 16, 32, 64, and 128 px.
What spacing scale comes from a 4 px base at 2x?
Doubling each step gives 4, 8, 16, 32, 64, and 128 px — enough steps for tight gaps and generous sections.
Frequently asked questions
What base should I start with?
4 px is the common default because it divides cleanly and pairs well with 8-point grids.
Can I use a multiplier like 1.5?
Yes, 1.5 gives gentler steps, which suits dense interfaces better than doubling.