Presets

Margin

Padding

Box Model

Live Preview

Content

CSS Output

How to Use the CSS Spacing Generator
  1. Choose a preset or set your own values.
  2. Select a unit — px, rem, em, or %.
  3. Adjust margin and padding per side using sliders or number inputs.
  4. Enable “Link all sides” to set all four sides at once.
  5. Watch the box model diagram and live preview update instantly.
  6. Pick Shorthand or Longhand output, then click Copy CSS.
Box Model Quick Reference
LayerPurpose
MarginSpace outside the element border
BorderThe element’s border (set separately)
PaddingSpace inside the border, around the content
ContentThe actual content area (text, images, etc.)
CSS Shorthand Rules
CSS uses a clockwise order: top → right → bottom → left.
/* 1 value: all sides equal */
margin: 16px;

/* 2 values: top/bottom  left/right */
padding: 12px 24px;

/* 3 values: top  left/right  bottom */
margin: 8px 16px 24px;

/* 4 values: top right bottom left */
padding: 8px 16px 12px 16px;