Spacing Controls

Adjust individual sides

Top

Left

Box

Right

Bottom

Units

Quick set

Live Preview

16px16px16px16px

Tip: Switch between Margin and Padding to fine-tune spacing.

Padding Presets

About Spacing

Marginadds space outside an element.

Paddingadds space inside an element.

Works with all elements
Instant CSS output
Copy and use anywhere

CSS

.box {
  margin: 16px;
  padding: 16px;
}

HTML

<div class="box">
  Spacing Preview
</div>

Show longhand CSS (individual side properties)

.box {
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  margin-left: 16px;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}

About CSS Spacing Generator

Fine-tune margin and padding values visually. Adjust each side or use presets to get the perfect spacing, then copy clean CSS instantly.

Also check out the Box Shadow Generator, the Border Radius Generator, the Flexbox Generator and the Grid Generator.