CSS Spacing Generator
Visual margin and padding editor with shorthand optimization, units (px/rem/em/%), auto margins, design-system presets. Free, client-side, instant.
Visual box-model editor with shorthand optimization (collapses to 1/2/3-value form when sides match), 5 unit options (px/rem/em/%/auto), linked-sides toggles, and design-system scale presets (Tailwind / Material / Bootstrap).
Margin space OUTSIDE the element
Padding space INSIDE the element
Live preview
CSS (shorthand-optimized)
HTML
How to Use CSS Spacing Generator
- Pick a design-system preset (Tailwind 4px / Material 8px / Bootstrap 16px) or start from scratch.
- Set box-sizing.
border-boxis what most modern stylesheets use, since padding counts toward total width instead of being added on top. - Edit margin top/right/bottom/left. Pick units: px (absolute), rem (responsive to root), em (responsive to parent), % (relative to parent width), or check
autoon a margin side for auto-centering. - Use Link sides to mirror values: Horizontal locks Right and Left, Vertical locks Top and Bottom, All 4 locks all together.
- Edit padding the same way.
- Output is shorthand-optimized: if all 4 sides equal, it emits the 1-value form (
padding: 16px); if top/bottom and left/right pairs match, it emits the 2-value form, and so on. - Copy CSS / HTML, or download
spacing.css.
Frequently Asked Questions
What is CSS spacing shorthand?
CSS lets you write 1, 2, 3, or 4 values for margin/padding instead of 4 separate properties. 1 value: all 4 sides equal. 2 values: top/bottom, left/right. 3 values: top, left/right, bottom. 4 values: top, right, bottom, left (clockwise). Knowing this saves real bytes in production CSS.
What is the difference between margin and padding?
Padding: space INSIDE the element between content and border. Background-color extends into padding. Margin: space OUTSIDE the element between this element and its neighbors. Background-color does NOT extend into margin. The visual mnemonic: padding pushes content IN, margin pushes neighbors AWAY.
What is margin collapse?
When two block-level elements stack vertically, their adjacent margins MERGE into the larger of the two. div { margin-bottom: 20px } followed by div { margin-top: 30px } gives a 30px gap, NOT 50px. Only vertical margins collapse, only between block elements, only when there is no border/padding between them. Flexbox and grid disable collapsing.
When should I use rem vs px for spacing?
rem is relative to root font-size, so spacing scales with user-set font size (an accessibility win). Use it for component-level spacing where you want layout to grow with text. px is absolute pixels: predictable across users. Use it for icon-sized fixed gaps. Rule of thumb: rem for layout, px for icons.
How does margin 0 auto center an element?
Auto-margin on a horizontal axis distributes remaining space equally between left and right. If a 600px-wide block sits in a 1000px container with margin: 0 auto, the 400px leftover splits to 200px on each side, centering it. This only works on block elements with a fixed width. For flex/grid containers, use justify-content: center instead.
Why does box-sizing matter?
Default content-box: padding and border ADD to the declared width. A width: 200px; padding: 20px element is actually 240px wide. border-box: padding and border are INCLUDED in the declared width, so the 200px element stays 200px wide and the content area shrinks. Modern best practice: * { box-sizing: border-box; } for the whole page, so there is no surprise overflow.
Are negative margins safe?
Yes, in moderation. Negative margins are useful for overlapping elements, pulling something into a parent’s padding, or anchor positioning. But they can cause unexpected layout shifts when content reflows. Inside flexbox/grid, negative margins behave subtly differently (they shrink the item’s effective size rather than pull the layout). Use sparingly.
What about gap, row-gap, column-gap?
Modern CSS gap works on flexbox AND grid (added to flexbox in 2021). It replaces hacky margin: 8px plus :last-child margin: 0 patterns for collection layouts. It does not apply to single elements, only between flex/grid children. This tool focuses on the element’s own margin/padding; for cross-child spacing use the gap property on the parent.
Is my data secure?
Yes. Values, selectors, units, everything stays in your browser. Nothing is uploaded.