The CSS margin property

Q: What is the difference between margin and padding?

margin is space outside the border that pushes other elements away; padding is space inside the border, between the content and the edge. Margin is transparent; padding takes the element's background.

Q: How do I center a div with margin?

Give the div a width, then margin: 0 auto. The auto left and right margins split the remaining space evenly. Without a width there is nothing to center.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS margin property adds space outside an element, pushing other elements away. It is a shorthand: margin: 16px sets all four sides, margin: 10px 20px sets top/bottom then left/right, and margin: 0 auto centers a block that has a width. Unlike padding, margins can be negative and vertical ones can collapse.

Overview

Margin is the breathing room around an element. It sits outside the border and pushes neighboring elements away, which is how you create the gaps between paragraphs, cards and sections.

It is a shorthand for the four individual sides, and the number of values you give changes what they mean: one value applies to all four sides, two values are top/bottom then left/right, three are top, left/right, bottom, and four go clockwise from the top. The famous margin: 0 auto uses auto to soak up the leftover horizontal space evenly, which centers a block that has a defined width.

Two behaviors catch people out. Margins can be negative (margin-top: -8px pulls an element upward), and adjacent vertical margins collapse — when a paragraph with margin-bottom: 20px meets one with margin-top: 20px, the gap is 20px, not 40. If that ever surprises you, that is why. Modern layouts increasingly use gap on a flex or grid container to sidestep collapsing entirely.

Syntax

selector {
  /* all four sides */
  margin: 16px;
  /* top/bottom  left/right */
  margin: 10px 20px;
  /* top  right  bottom  left */
  margin: 10px 20px 30px 40px;
}

Values

The margin property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`length`	A fixed gap such as 16px, 1rem or 2em.
`percentage`	A share of the containing block's width, e.g. 5%.
`auto`	Lets the browser share leftover space — margin: 0 auto centers a block that has a width.
`0`	No margin.
`negative`	Values like -8px are allowed and pull the element toward its neighbor.

Example

Live example

<style>
  .stack p {
    background: #eef2ff;
    padding: 12px;
    margin: 0 0 16px 0;
    border-radius: 8px;
    font: 15px system-ui, sans-serif;
  }
  .centered {
    width: 220px;
    margin: 0 auto;
    background: #1c7ce9;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font: 600 15px system-ui, sans-serif;
  }
</style>
<div class="stack">
  <p>16px of margin-bottom separates these two.</p>
  <p>And the box below is centered with margin: 0 auto.</p>
</div>
<div class="centered">Centered</div>

Best practices

Use gap on flex and grid containers instead of margins between children — it avoids collapsing and never leaves a stray margin on the first or last item.
Center a fixed-width block with margin-inline: auto (or margin: 0 auto). It only works when the element has a width.
Pick one direction for stacking space — usually margin-bottom — so you are not fighting collapsed margins from both sides.
Prefer logical properties like margin-inline and margin-block when you support right-to-left languages; they follow the text direction automatically.

Frequently asked questions

What is the difference between margin and padding?

margin is space outside the border that pushes other elements away; padding is space inside the border, between the content and the edge. Margin is transparent; padding takes the element's background.

How do I center a div with margin?

Give the div a width, then margin: 0 auto. The auto left and right margins split the remaining space evenly. Without a width there is nothing to center.

What is margin collapsing?

When two vertical margins meet, the browser uses the larger of the two rather than adding them. It only affects top and bottom margins in normal flow, never left and right.

Can margin be negative?

Yes. A negative margin pulls the element toward its neighbor or its parent's edge, which is occasionally handy for overlapping or for canceling a parent's padding.

list-style max-width

References