Runnable CSS Docs: Margin

What margin is

Margin is the space outside an element's border. It is always transparent, and its job is to push other elements away. In the example, the gray container shows through the margin around the blue box:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

The gray band is not part of the box: the box's own background stops at its border. For space that takes the element's background, use padding.

The margin shorthand

margin takes one to four values, in the same clockwise order as padding:

Declaration	Top	Right	Bottom	Left
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

Each side also has its own property (margin-top, margin-right, margin-bottom, margin-left) and logical versions that follow the text direction (margin-inline-start, margin-inline-end, margin-block, margin-inline).

Unlike padding, margin accepts auto and negative values:

Value	Example	Notes
Length	`16px`, `1.5rem`	Most common
Percentage	`5%`	Of the containing block's width, for all four sides
`auto`	`margin: 0 auto`	The browser fills in the leftover space
Negative	`margin-top: -10px`	Pulls the element or its neighbor closer, can overlap

Centering with margin: 0 auto

margin: 0 auto is the classic way to center a block horizontally. auto on both sides tells the browser to split the leftover space equally. It needs a width smaller than the container, or there is nothing left to split:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Auto margins do not center vertically in normal flow (vertical auto margins become 0) and do nothing on inline elements. For a full overview of centering, see how to center a div.

Margin collapsing

When two vertical margins touch, they do not add up. The browser keeps only the larger one. Here the first box has margin-bottom: 30px and the second margin-top: 20px, and the gap between them is 30px, not 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

Collapsing is deliberate: it lets paragraphs and headings each carry their own spacing without doubling it where they meet. It catches people out in a second case, where a child's top margin escapes its parent:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

In the first parent, the child's 30px margin collapsed through the parent's top edge, so it pushes the whole parent down instead of creating gray space inside it. Any of these stops it:

display: flow-root on the parent (unlike overflow: hidden, it clips nothing).
Padding or a border on the parent's top edge.
A flex or grid parent: margins of flex and grid items never collapse.

Horizontal margins never collapse, and neither do margins of floated or absolutely positioned elements.

Negative margins

A negative margin pulls in the opposite direction. On the top or start side it moves the element itself; on the bottom or end side it pulls the next element closer. Boxes can overlap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto in flexbox

Inside a flex container, an auto margin takes all the free space on its side. It is the simplest way to push one item to the far end of a row, and in flexbox auto works vertically too:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto puts the free space before "Log in", at the end of the row in both left-to-right and right-to-left pages.

Common mistakes

margin: 0 auto on an element with no width. A block already fills its container; set a width or max-width.
margin: auto on an inline element. Auto margins on span, a or an img left inline are 0. Make it display: block.
Adding two vertical margins and expecting the sum. They collapse to the larger one; use gap in flex or grid, or one margin direction consistently.
A child's margin pushing its parent. That is parent-child collapsing; add display: flow-root to the parent.
Using margin for space that should have a background. Margin is transparent; use padding.

Frequently Asked Questions

What is margin in CSS?

Margin is the space outside an element's border. It is transparent and pushes neighboring elements away. It is set with margin or the single-side properties margin-top, margin-right, margin-bottom and margin-left.

What does margin: 0 auto do?

It sets the top and bottom margins to 0 and splits the leftover horizontal space equally between the left and right margins, which centers a block element horizontally. The element needs a width smaller than its container, for example max-width: 600px.

Why is margin auto not centering my element?

Usually because the element has no width (a block fills its container, so there is nothing to split), or because it is inline (span, a, img by default), where auto margins are 0. Give it a width and display: block, or center it from the parent with flexbox or grid.

What is margin collapsing?

When two vertical margins meet, for example the bottom margin of one paragraph and the top margin of the next, the browser uses only the larger one instead of adding them. It happens only to vertical margins of block boxes in normal flow, not in flex or grid layouts.

Can margin be negative?

Yes. A negative margin pulls the element toward that side, or pulls the next element over it, so boxes can overlap. It is useful for small alignment fixes and for letting an element break out of its container's padding.

Related concepts