Loading...

CSS Margin

You can paint a box, draw its border, and round its corners. Next skill: push boxes apart. margin is the outer gap around an element — the breathing room outside the border.

What is margin?

Margin is empty space around the outside of an element’s border. It separates one box from its neighbors. It does not paint the background of the element into that gap — that gap is outside the filled area.

Margin vs padding (quick contrast)

Padding (next lesson) is inside the border — between content and edge. Margin is outside the border — between this box and the next. If you only remember one line today: margin = outer, padding = inner.

Shorthand: how many values?

You can pass one, two, three, or four lengths. Sides follow a fixed order.

📊 Margin shorthand value counts

Values Meaning Everyday note
1 All four sides the same Even breathing room around a card
2 Top+bottom, then left+right Vertical and horizontal pairs
3 Top, left+right, bottom Less common — know it exists
4 Top, right, bottom, left Full control, clockwise from top

Even space on every side

Start with one length for all sides.

Same margin on all sides

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Two values — vertical, then horizontal

Two lengths pair opposite sides: first is top and bottom; second is left and right.

Vertical then horizontal margin

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

Four values — clockwise from the top

When each side needs its own gap, list top → right → bottom → left.

Four-sided margin shorthand

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

Center a block with auto

For a block-level box with a set width, margin-left: auto and margin-right: auto (often written margin: 0 auto) push equal leftover space to both sides — a classic way to center the box horizontally.

Horizontal centering with auto

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Vertical margins can collapse

When two block elements stack, the bottom margin of the first and the top margin of the second often collapse into a single gap — usually the larger of the two, not their sum. This surprises beginners; expect it between stacked paragraphs and sections.

Stacked blocks with collapsing margins

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Between them you often see about 24px, not 48px */

One side at a time

Longhands like margin-top are perfect when you only need space above a heading or below a button.

Top margin only

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

Try it yourself

  1. Give two cards margin: 16px and watch the outer gap.
  2. Rewrite one card as margin: 24px 12px and notice vertical vs horizontal.
  3. Center a 280px-wide box with margin: 0 auto.
  4. Stack two colored blocks with margin-bottom and margin-top both 24px — measure whether the gap looks like 24px or 48px.
  5. Space a heading with margin-top only.

Common mistakes

  • Using margin when you meant padding (inner cushion for text)
  • Expecting margin: auto to center every flex/grid item the same way as a simple block (layout context matters)
  • Adding top and bottom margins and assuming they always add up (collapse may shrink the gap)
  • Huge margins everywhere instead of a small, consistent scale
  • Mixing up the four-value order (top, right, bottom, left)

Summary

  • Margin is outer space outside the border
  • Shorthand: 1, 2, or 4 values (clockwise from top for four)
  • margin: 0 auto centers a sized block horizontally
  • Vertical margins between stacked blocks can collapse
  • Use per-side longhands when only one edge needs space
  • Padding is the inner cousin — next lesson

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
9
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial