margin in CSS: spacing elements apart without ever touching their size

Spacing two buttons apart, pushing a paragraph away from the heading above it, centring a card inside its container: in the vast majority of cases, the answer starts with margin. It is the most used property in the Box model, and also the one that trips up beginners the most often: two vertical margins that should add up, and quietly do not.

Getting comfortable with margin means understanding three separate things: how to write its value quickly with the shorthand, how to centre a block using an automatic value, and why its vertical margins sometimes behave in a way that seems to defy logic.

Definition

margin sets the transparent space between an element's border and its neighbours. Unlike padding, that space is never part of the box itself: it never takes a background, a border or a shadow, it simply pushes other elements further away.

.button {
  margin-top: 24px;
  margin-right: 8px;
  margin-bottom: 24px;
  margin-left: 8px;
}

The four sides can be set independently, but in practice they are almost always written with the margin shorthand, which is faster to read and to change.

The margin shorthand and its four forms

How many values are passed to margin changes what they mean. The same rule applies to padding, which follows the exact same logic.

Remembering the order of the four values is enough to avoid most mistakes: it always starts at the top and moves clockwise.

Centring a block with margin: auto

When a block-level element has a fixed width narrower than its container, setting both its left and right margins to auto makes them exactly equal: the block ends up centred.

.container {
  width: 600px;
  margin: 0 auto;
}

This trick has two strict conditions people often forget: the element needs an explicit width, and it must stay a regular block-level element. On an element already managed by Flexbox, the trick becomes unnecessary: justify-content: center on the parent container does the same job without fixing any width at all.

The collapsing trap: vertical margins that merge

Two adjacent vertical margins between block-level elements do not always add up: they merge into a single margin, equal to the larger of the two. This is called margin collapsing, and it is almost always the first explanation to check when a spacing calculated on paper does not match what actually shows up on screen.

.heading {
  margin-bottom: 20px;
}
.paragraph {
  margin-top: 30px;
}

/* Actual gap between the two: 30px, not 50px */

The same thing happens with an empty element's own margin when it has no padding and no border, and with a first child's margin against its parent when nothing separates them. Switching the container to display: flex, display: grid, or giving it even a tiny padding, is enough to stop collapsing between its children: the simplest fix whenever the behaviour genuinely gets in the way.

Negative values: pulling closer or bleeding out

Unlike padding, which can never go negative, margin accepts negative values. A negative margin pulls an element closer to its neighbour, up to overlapping it, or drags an image all the way to the edge of a container that itself has padding.

.full-width-image {
  margin-left: -20px;
  margin-right: -20px;
}

This is a real technique, used to deliberately make an element bleed out of a centred container, but it stays fragile: a poorly tuned negative value silently breaks the layout on a different screen, without ever throwing a visible error in the console.

Frequently asked questions

That is vertical margin collapsing: between two adjacent block-level elements, only the larger of the two margins counts, they do not add up. This behaviour only affects vertical margins, never horizontal ones.

With margin: 0 auto, provided the element has an explicit width and stays a regular block-level element. On a flex container, justify-content: center on the parent is usually simpler and more reliable.

Yes, unlike padding, which refuses negative values outright. A negative margin pulls two elements closer or makes them overlap slightly, a technique worth using with care and always checking across several screen sizes.