Why use rem for spacing instead of px?

rem spacing scales with the user's root font-size and zoom, so margins and gaps stay proportional to text everywhere.

What base step should I use?

A 4px base (Tailwind-style) is flexible; an 8px base keeps the scale simpler. Pick one and apply it consistently.

Is css spacing generator free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

Can I copy the generated CSS output?

Yes. Each tool provides copy-ready snippets so you can paste values directly into code.

Converter · CSS unit tool

CSS spacing generator

Enter a pixel spacing value and your root font-size to mint REM-based `margin`, `gap`, or `padding` snippets. Spacing in rem scales with user settings, so your whole layout breathes consistently under zoom.

Pixels to convert

Enter the pixel value first.

Calculation base

Root font size

Usually html { font-size }

Result

1.5000 rem

24px ÷ 16px = 1.5000rem

CSS snippet

css

gap: 1.5000rem; /* or margin / padding */

Keyboard tip: press Tab or Shift+Tab to switch fields.

Build a spacing staircase

Most design systems use a 4px or 8px base and step up in multiples: 4, 8, 12, 16, 24, 32, 48, 64. Converting each step to rem (÷ root) gives you portable tokens.

A consistent staircase removes one-off magic numbers from your CSS and makes spacing decisions a matter of picking a token rather than guessing pixels.

Export as design tokens

Store the rem values as custom properties (`--space-1`, `--space-2`, …) or in your design-system JSON so design and code stay in sync.

Using rem tokens for gap and padding means a single root font-size change rescales the entire interface predictably.

Copy-ready examples

Spacing tokens

css

:root {
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-6: 1.5rem;  /* 24px */
}
.stack { display: grid; gap: var(--space-4); }

Frequently asked questions

Why use rem for spacing instead of px?: rem spacing scales with the user's root font-size and zoom, so margins and gaps stay proportional to text everywhere.
What base step should I use?: A 4px base (Tailwind-style) is flexible; an 8px base keeps the scale simpler. Pick one and apply it consistently.
Is css spacing generator free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.
Can I copy the generated CSS output?: Yes. Each tool provides copy-ready snippets so you can paste values directly into code.