Micro Tools

Spacing Calculator

Build a consistent spacing scale for your designs. Pick a base unit and ratio to generate harmonious padding and margin steps, with CSS variables included.

Scale settings

Results update live.

Base unit (px)

Ratio

Steps above base

Spacing scale

Step	Multiplier	Pixels	Preview

CSS variables

Why use a spacing scale

Random padding values make interfaces feel messy: 13px here, 17px there. A spacing scale derives every step from one base unit multiplied by a fixed ratio, so margins and padding relate to each other harmoniously. Developers love it too, because var(--space-lg) is clearer than a magic number.

Choosing a base and ratio

A 4px base with a 1.5 ratio is a popular starting point that stays friendly to common screen densities. The classic 8-point grid (base 8, doubling ratio) is stricter and great for mobile. Pick what fits your design, then never hand-tune a padding value again.

Spacing Calculator FAQs

What is a spacing scale?

A predefined set of spacing values generated from a base unit and a multiplier ratio, used consistently for all margins, paddings and gaps in a design.

Why start from a 4px or 8px base?

Most screens render cleanly at multiples of 4 or 8, which avoids blurry half-pixel edges and keeps spacing predictable across devices.

How do I use the CSS variables?

Copy the :root block into your stylesheet, then reference values like var(--space-md) anywhere you would write a padding or margin.

Can I add more steps?

Yes, increase the steps field up to 16. Each additional step multiplies the previous one by your chosen ratio.

Does this work with Tailwind?

The concept matches Tailwind's default spacing scale. You can map these pixel values onto your tailwind.config.js spacing tokens if you want a custom scale.