Padding vs Margin

Padding and margin are the two CSS spacing properties that most developers encounter first — and confuse longest. The confusion is understandable: both create space, both are measured in pixels, and both produce gaps that look similar in isolation. But they behave differently in ways that matter enormously in complex layouts.

Padding: space inside the boundary

Padding is the space between an element’s content and its border. It is interior space. When you add padding: 24px to a card, the card’s background colour fills that 24px. The card’s dimensions grow. The element owns that space.

This is the key property of padding: the background renders into it. A button with padding: 12px 24px has a background (or border) that extends through the padding area. If you click anywhere in that padding, you are clicking the button. The padding is part of the element.

Padding is the right tool for internal space — the breathing room between a component’s content and its edge. Form input padding. Card content area. Button height derived from vertical padding around the label.

Margin: space outside the boundary

Margin is the space outside an element’s border. It pushes the element’s neighbours away. The background does not extend into the margin area — margins are always transparent. Clicking in the margin does not click the element.

Margin is the right tool for spacing between components — pushing a card away from its siblings, separating a heading from the body text below it, creating the gap between a footer and the last page section.

Margin collapsing

Margin has a non-obvious behaviour called collapsing. When two block elements have vertical margins that touch — for example, a paragraph with margin-bottom: 24px followed by a heading with margin-top: 16px — the resulting gap is not 40px. It is 24px: the larger of the two values, not their sum.

Collapsing applies only to vertical margins between block-level elements in normal flow. Padding never collapses. Margins between flex or grid children do not collapse. This behaviour surprises developers most when spacing between headings and paragraphs looks wrong — often because one element’s margin is already covering the space that another’s would add.

Which to use

A useful rule of thumb: padding for what is inside, margin for what is between.

• Card padding: the space between a card’s content and its edge → padding
• Space between two cards → margin or, better for grids, a gap property
• Button height derived from top and bottom space → padding
• Space below a heading before body text → margin-bottom on the heading, or margin-top on the first paragraph
• Space between nav items → gap in a flex container (which behaves like margin, without the collapsing)

Modern layout — flexbox and CSS Grid — uses the gap property rather than margins for spacing between children. gap is simpler, does not collapse, and does not add unwanted space after the last child. Where possible, prefer gap over margins for spacing between layout children.

Next: information density — how much content to put in a given space, and what that choice communicates.