← Back to CSS Course | Chapter 3: Box Model | Lesson 1 of 7

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:

  1. What Is Margin?
  2. Setting Margin on All Sides
  3. Individual Margin Sides
  4. Margin Shorthand
  5. Margin Auto and Centering
Syntax
css 
selector {
  margin: top right bottom left;
  margin-top: length;
  margin: 0 auto;
}

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.
  • Accepted values:
  • length — e.g. 16px, 1rem
  • percentage — relative to the container's width
  • auto — the browser calculates the space
  • negative length — pulls the element outward
  • one to four values — top, right, bottom, left order
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • margin-top — space above
  • margin-right — space to the right
  • margin-bottom — space below
  • margin-left — space to the left
  • each takes a length, percentage, auto or a negative value
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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 sets all four sides in one declaration, and the number of values decides how they are applied. One value sets all four sides. Two values set top and bottom first, then left and right. Three values set top, then left and right together, then bottom. Four values go clockwise, starting from the top: top, right, bottom, left.

Margins also accept percentages, such as margin: 5%, which is calculated from the width of the parent (containing) block, even for top and bottom margins. Use margin: 0 to remove all margin, and auto on the left and right to centre a block that has a width.

Note:
  • Remember the order with TRouBLe: top, right, bottom, left, going clockwise starting from the top.
  • Accepted values:
  • length | percentage | auto — each value (auto and negatives allowed)
  • 1 value — all four sides
  • 2 values — top/bottom, then left/right
  • 3 values — top, left/right, bottom
  • 4 values — top, right, bottom, left (clockwise)
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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>
.wrap { border: 1px dashed #999; }
.box { background: lightblue; padding: 4px; }
.one { margin: 20px; }
.two { margin: 10px 30px; }
.three { margin: 5px 20px 15px; }
.four { margin: 5px 10px 15px 20px; }
</style>
<div class="wrap">
  <div class="box one">1 value — all sides 20px</div>
  <div class="box two">2 values — top/bottom 10px, left/right 30px</div>
  <div class="box three">3 values — top 5px, sides 20px, bottom 15px</div>
  <div class="box four">4 values — top 5px, right 10px, bottom 15px, left 20px</div>
</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.
  • Accepted values:
  • auto — splits the free space (centers a block with a width)
  • 0 auto — no vertical margin, centered horizontally
  • length — a fixed amount of space
  • auto on one side — pushes the element to the other side in flex layouts
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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>
Live Example
Related Topics

CSS Padding · CSS Height/Width · CSS Box Model · CSS Rounded Corners

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Confusing margin (space outside the border) with padding (space inside the border).
  2. Being surprised by vertical margin collapsing between two stacked block elements.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.