📘 Lesson · Lesson 16

Margin

margin — Space Outside the Element

.box {
    margin: 20px;    /* 20px of space on ALL four sides, outside the border */
}

This box has 20px margin pushing it away from the dashed container edges

From the box model, margin is the OUTERMOST layer — empty space around the element that pushes neighbouring elements away. It's how you create gaps BETWEEN things: space between cards, between a heading and paragraph, between sections. Margin is transparent (it never has a colour); it's pure spacing. When you want two elements to not touch, margin is the answer.

The Four Sides — control each edge

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

You can set each side individually with margin-top, margin-right, margin-bottom, margin-left. This is useful when you want space in only one direction — for example, margin-bottom: 20px on paragraphs to space them apart vertically without adding side gaps. But writing four lines is verbose, which is why the shorthand exists (next).

The Shorthand — one line, all sides

margin: 10px;                  /* all 4 sides: 10px */
margin: 10px 20px;             /* top/bottom: 10px | left/right: 20px */
margin: 10px 20px 30px;        /* top:10 | left/right:20 | bottom:30 */
margin: 10px 20px 30px 40px;   /* top | right | bottom | left (clockwise) */

The shorthand values go CLOCKWISE from the top: Top → Right → Bottom → Left. A memory aid is the word "TRouBLe" (Top, Right, Bottom, Left). The shortcuts: one value = all sides the same; two values = first is top&bottom, second is left&right; three = top, sides, bottom; four = each side clockwise. The two-value form (margin: 10px 20px) is the most common in practice. This same clockwise system works for padding and border too — learn it once, use it everywhere.

margin auto — the Centering Trick

.box {
    width: 400px;
    margin: 0 auto;    /* top/bottom 0, left/right auto = centered */
}

You met this in the centering chapter — auto as a left/right margin tells the browser to split the leftover horizontal space equally, centering a block element. It only works horizontally and only when the element has a width. This is THE standard way to center a fixed-width container on a page. auto has no effect on top/bottom margins for normal block elements — vertical centering needs flexbox, as you learned.

Margin Collapse — the confusing gotcha

<p style="margin-bottom: 30px">First paragraph</p>
<p style="margin-top: 20px">Second paragraph</p>

/* Gap between them is NOT 30+20 = 50px...
   it's just 30px (the LARGER of the two)! */

A genuinely surprising CSS behaviour: when two vertical margins meet (like the bottom margin of one paragraph and the top margin of the next), they don't ADD — they "collapse" into a single margin equal to the LARGER of the two. So 30px + 20px gives a 30px gap, not 50px. This only happens with top/bottom margins between block elements, never with padding or left/right margins. It surprises everyone the first time, but it's actually helpful — it keeps spacing between stacked paragraphs consistent instead of doubling up. Just know it exists so it doesn't confuse you.

Exam Corner

Q: What is margin? Transparent space outside the border that pushes other elements away.

Q: In margin: 10px 20px 30px 40px, which side is which? Clockwise from top: top 10, right 20, bottom 30, left 40 (TRouBLe).

Q: What does margin: 10px 20px mean? Top & bottom 10px, left & right 20px.

Q: What is margin collapse? Adjacent vertical margins merge into the larger one, not their sum.

Q: How does margin auto center an element? It splits leftover horizontal space equally (needs a set width, horizontal only).

margin — Element के बाहर की Space

.box {
    margin: 20px;    /* CHARON taraf 20px space, border ke bahar */
}

Is box ka 20px margin ise dashed container kinaron se door dhakel raha hai

Box model से, margin सबसे बाहरी layer है — element के चारों ओर खाली space जो पड़ोसी elements को दूर धकेलती है. यह चीज़ों के BEECH gaps बनाने का तरीका है: cards के बीच space, heading और paragraph के बीच, sections के बीच. Margin transparent है (इसका कभी colour नहीं); यह शुद्ध spacing है. जब दो elements को न छूने देना हो, margin जवाब है.

चार Sides — हर किनारा control

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

हर side अलग set कर सकते हैं margin-top, margin-right, margin-bottom, margin-left से. यह तब काम आता है जब सिर्फ एक दिशा में space चाहिए — जैसे paragraphs पर margin-bottom: 20px उन्हें side gaps जोड़े बिना vertically अलग करने को. पर चार lines लिखना lambा है, इसीलिए shorthand है (अगला).

Shorthand — एक line, सारे sides

margin: 10px;                  /* charon sides: 10px */
margin: 10px 20px;             /* top/bottom: 10px | left/right: 20px */
margin: 10px 20px 30px;        /* top:10 | left/right:20 | bottom:30 */
margin: 10px 20px 30px 40px;   /* top | right | bottom | left (clockwise) */

Shorthand values ऊपर से CLOCKWISE जाती हैं: Top → Right → Bottom → Left. Memory aid शब्द "TRouBLe" (Top, Right, Bottom, Left). Shortcuts: एक value = सारे sides same; दो values = पहली top&bottom, दूसरी left&right; तीन = top, sides, bottom; चार = हर side clockwise. दो-value form (margin: 10px 20px) practice में सबसे common है. यही clockwise system padding और border के लिए भी चलता है — एक बार सीखिए, हर जगह use कीजिए.

margin auto — Centering Trick

.box {
    width: 400px;
    margin: 0 auto;    /* top/bottom 0, left/right auto = centered */
}

यह centering chapter में मिला — left/right margin के रूप में auto browser को कहता है बची horizontal space बराबर बांटे, block element center करते हुए. यह सिर्फ horizontally और तभी काम करता है जब element की width हो. Page पर fixed-width container center करने का यह standard तरीका है. auto का normal block elements के top/bottom margins पर कोई असर नहीं — vertical centering को flexbox चाहिए, जैसा आपने सीखा.

Margin Collapse — उलझाने वाला gotcha

<p style="margin-bottom: 30px">First paragraph</p>
<p style="margin-top: 20px">Second paragraph</p>

/* Inke beech gap 30+20 = 50px NAHI hai...
   yeh sirf 30px hai (dono me se BADA)! */

सच में चौंकाने वाला CSS व्यवहार: जब दो vertical margins मिलते हैं (जैसे एक paragraph का bottom margin और अगले का top margin), वे JODE नहीं जाते — वे "collapse" होकर दोनों में से BADE के बराबर single margin बन जाते हैं. तो 30px + 20px 30px gap देता है, 50px नहीं. यह सिर्फ block elements के बीच top/bottom margins के साथ होता है, कभी padding या left/right margins के साथ नहीं. पहली बार सबको चौंकाता है, पर असल में मददगार है — यह stacked paragraphs के बीच spacing दोगुनी होने के बजाय consistent रखता है. बस जानिए यह है ताकि आपको confuse न करे.

Exam Corner

Q: Margin क्या है? Border के बाहर transparent space जो दूसरे elements को दूर धकेलती है.

Q: margin: 10px 20px 30px 40px में कौन-सा side कौन-सा? ऊपर से clockwise: top 10, right 20, bottom 30, left 40 (TRouBLe).

Q: margin: 10px 20px का क्या मतलब? Top और bottom 10px, left और right 20px.

Q: Margin collapse क्या है? साथ वाले vertical margins उनके योग के बजाय बड़े में merge हो जाते हैं.

Q: margin auto element कैसे center करता है? बची horizontal space बराबर बांटता है (set width चाहिए, सिर्फ horizontal).

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.