Back to UI design
Fluid spacing generator: padding and margin that scale with the screen
Generate a spacing scale from small to large with clamp() that adapts between phones and desktops. Copy CSS variables for padding and gap.
How to use
- Enter the smallest and largest screen widths your site must look good on.
- Enter the base spacing at both ends. The tool builds steps from 3XS to 3XL plus jump pairs such as S-L.
- Copy the CSS variables and use them like padding: var(--space-m) or gap: var(--space-s-l).
Frequently asked questions
Why should spacing scale too?
Space that suits a desktop is often too wide on a phone. Fluid spacing tightens on small screens so the page never feels empty or cramped.
When do I use a jump pair like S-L?
When spacing should change more than usual, for example section padding: small on phones, much larger on desktops.
Should I combine it with fluid type?
Yes. Use the same smallest and largest screen widths for both so text and spacing scale in step.