CSS Margins

Margin is the invisible space just outside an element's border, pushing it away from whatever is next to it. It's how you control the breathing room between separate elements, like the gap between two cards or the space above a heading. You can set margin the same on all four sides at once, target one side individually (margin-top, margin-right, margin-bottom, margin-left), or use the shorthand property to set several sides in a single line. Margin can even collapse between stacked elements, a quirk worth understanding once you start relying on it. Consistent margins are a big part of what makes a page like cookiescursor.com feel organized instead of cluttered.

In this page:

What Is Margin?
Setting Margin on All Sides
Individual Margin Sides
Margin Shorthand
Margin Auto and Centering

What Is Margin?

Margin is transparent space outside an element's border. It doesn't have a background or a visible edge, it simply pushes neighboring elements further away. Adjacent vertical margins between elements can collapse into a single margin, a quirk that surprises many beginners.

Note: Think of margin as personal space, it controls how close an element lets its neighbors get.

Warning: Margin is invisible, so if spacing looks off, remember to check for it in devtools, it won't show up just by looking at the page.

Example: What Is Margin?

css

<style>
.box {
  margin: 20px;
  background: lightblue;
}
</style>
<div class="box">Box with margin</div>

Setting Margin on All Sides

Writing margin with a single value applies that exact amount of space to all four sides of an element at once. This single-value shortcut is convenient, but real layouts more often need different spacing on different sides.

Note: A single-value margin is the simplest way to add uniform spacing without thinking about each side separately.

Warning: A single margin value affects every side equally, if you only meant to space out the top, you'll want a more specific property instead.

Example: Setting Margin on All Sides

css

<style>
.box {
  margin: 20px;
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Uniform margin on all sides</div>

Individual Margin Sides

margin-top, margin-right, margin-bottom, and margin-left let you control spacing on just one side of an element, independent of the others. These four properties give you complete independent control when a design calls for asymmetric spacing.

Note: Individual side margins are especially useful for spacing a heading away from the content above it without affecting the sides or bottom.

Warning: Setting only margin-top and expecting the other sides to also have space is a common source of layout confusion for beginners.

Example: Individual Margin Sides

css

<style>
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Different margin per side</div>

Margin Shorthand

The margin shorthand accepts up to four values in the order top, right, bottom, left. Two values set vertical and horizontal margin together, and one value applies to all four sides.

Note: Remember the order with TRouBLe: top, right, bottom, left, going clockwise starting from the top.

Warning: Mixing up the number of values you pass changes their meaning entirely, three values and four values are interpreted differently.

Example: Margin Shorthand

css

<style>
.box {
  margin: 10px 20px 30px 40px;
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">top right bottom left</div>

Margin Auto and Centering

Setting the left and right margin to auto on a block-level element with a defined width horizontally centers it within its container, a common and reliable centering technique. This technique only works on block-level elements that have an explicit width, since auto margins need extra space to distribute.

Note: margin: 0 auto is a classic shorthand pattern: zero vertical margin, automatic (centering) horizontal margin.

Warning: margin: auto only centers an element horizontally if it has an explicit width; without one, the element just fills the full available width.

Example: Margin Auto and Centering

css

<style>
.box {
  width: 200px;
  margin: 0 auto;
  background: lightgreen;
}
</style>
<div class="box">Centered box</div>

Common Mistakes

Confusing margin (space outside the border) with padding (space inside the border).
Being surprised by vertical margin collapsing between two stacked block elements.
Using margin: auto expecting it to center an element that doesn't have a defined width.

Chapter Summary

Margin is the space outside an element's border, separating it from neighboring elements.
Margin can be set on all sides at once, on individual sides, or with a shorthand property.
margin: auto is a common technique for horizontally centering a block element with a set width.

Browser Support

All standard CSS margin properties covered here are supported by every modern browser.

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Border Shorthand Next Lesson → CSS Margin Collapse