CSS Spacing Generator

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.

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.

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.

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.

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.

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.

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.

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.

Yes. Values, selectors, units, everything stays in your browser. Nothing is uploaded.