CSS Margins: Spacing Outside Elements

CSS margins create space outside an element's border. Learn margin sides, the 1–4 value shorthand, margin auto, negative margins and how margin collapse works.

What is a CSS margin?

A margin is the empty space around the outside of a box. It pushes other elements away. Think of people standing in a queue: the margin is the personal space each person keeps around themselves. Margins are always transparent. They never show the element's background color.

You can set each side on its own:

.notice {
  margin-top: 20px;
  margin-right: 0;
  margin-bottom: 32px;
  margin-left: 0;
}

Margins accept lengths (px, rem, em), percentages, auto, and keywords like inherit. One surprise: a percentage margin is based on the width of the parent, even for margin-top and margin-bottom.

The margin shorthand: 1, 2, 3 or 4 values

You saw the shorthand table in the box model lesson. Let's understand why each version works, so you never have to look it up again. The values go clockwise from the top: top, right, bottom, left. When you give fewer values, CSS copies the missing ones from the opposite side.

Shorthand	Top	Right	Bottom	Left	Rule
margin: 10px;	10px	10px	10px	10px	One value for all sides.
margin: 10px 20px;	10px	20px	10px	20px	Bottom copies top, left copies right.
margin: 10px 20px 30px;	10px	20px	30px	20px	Only left is missing, so it copies right.
margin: 10px 20px 30px 40px;	10px	20px	30px	40px	Every side set.

The two-value version is the one you'll use most: "vertical then horizontal". For example margin: 0 auto; means no top or bottom margin, and automatic left and right margins.

margin: auto and centering

The value auto tells the browser: "work out this margin for me, using the free space". For a block element with a width, margin-left: auto and margin-right: auto share the free space equally, which centers the box.

You can also use auto on one side only to push something to the opposite side. This is very useful inside flexbox:

<nav class="topbar">
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/login" class="login">Log in</a>
</nav>

.topbar {
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  background: #1e293b;
}

.topbar a { color: white; }

.login {
  margin-left: auto;
}

"Home" and "Blog" sit on the left. The "Log in" link takes all the free space as its left margin, so it is pushed to the far right of the bar. You'll learn more about this in the Flexbox module.

Note: margin: auto does not center things vertically in normal block layout. Vertical auto margins become 0. Inside a flex or grid container, though, margin: auto centers in both directions.

Negative margins

Margins can be negative. A negative margin pulls the element (or its neighbor) closer, and can even make elements overlap. Use it carefully, but it has real uses:

<div class="profile">
  <div class="cover"></div>
  <img class="avatar" src="https://picsum.photos/id/64/120/120" alt="Portrait of Sara">
  <h3>Sara Lopez</h3>
</div>

.profile {
  max-width: 300px;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.cover {
  height: 90px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
  margin-top: -45px;
}

The avatar has margin-top: -45px, so it moves up by half its height and overlaps the colorful cover. This "avatar over banner" effect is common on social media profile pages.

Margin collapse in detail

The box model lesson told you that vertical margins between stacked blocks collapse: the bigger one wins. There are actually three situations where this happens:

1. Adjacent siblings. A paragraph with margin-bottom: 30px followed by one with margin-top: 20px gives a 30px gap, not 50px.
2. Parent and first or last child. If a parent has no border, no padding and no content between it and its first child, the child's top margin "leaks" out of the parent. The whole parent moves down instead of the child.
3. Empty blocks. An empty element with no height, padding or border lets its own top and bottom margins collapse into one.

Case 2 confuses many beginners:

<section class="hero">
  <h1>Welcome!</h1>
</section>

.hero { background: #dbeafe; }
.hero h1 { margin-top: 40px; }

You expect blue space above the heading. Instead, the blue section itself moves 40px down the page, and the heading touches its top edge. The margin escaped the parent.

There are several fixes. Any one of them stops the collapse:

• Give the parent some padding-top (usually the best fix: .hero { padding: 40px 20px; }).
• Give the parent a border.
• Make the parent a flex or grid container, or use display: flow-root.

Margins never collapse horizontally, and they never collapse inside flex or grid containers.

Common mistake: Using margin on a child to create space inside a colored parent. If the space should show the parent's background, use padding on the parent instead.

margin: inherit and other keywords

Like every property, margin accepts the global keywords:

• inherit copies the margin of the parent element.
• initial resets the margin to its default (0).
• unset and revert reset it too; revert goes back to the browser's own default (for example, a paragraph's normal top and bottom margin).

.list-reset ul { margin: 0; }
.list-reset ul ul { margin: inherit; }

Margins are not inherited automatically, so inherit is rarely needed. margin: 0 is the keyword-like reset you'll write most often.

Practice exercise

Make a blog post page with a title, three paragraphs and a "Read next" box. Use only margin-bottom for vertical spacing between elements, center the article with max-width and margin: 0 auto, and give the "Read next" box a colored background with padding. Then add a heading inside it with a top margin and check that the margin does not escape the box.

Hint: if the box jumps down, add padding to the box or set display: flow-root on it.

Key takeaways

• Margins are transparent space outside the border that pushes other elements away.
• Shorthand values go clockwise from the top; missing values copy the opposite side.
• margin: auto uses free space: center a block, or push an item to one side in flexbox.
• Negative margins pull elements closer and can create overlap effects.
• Vertical margins collapse between siblings, between parent and child, and in empty blocks.