CSS मार्जिन

Margin element के बाहर की खाली जगह है — एक box और अगले box के बीच का gap। यही पेज को भीड़-भाड़ से बचाता है। Margins पारदर्शी होते हैं: आप उन्हें कभी देखते नहीं, सिर्फ वह जगह देखते हैं जो वे बनाते हैं। अगर दो cards बहुत करीब लगें, तो fix लगभग हमेशा margin ही होता है।

Diagram — देखें, यह सब कैसे जुड़ता है

Margin की sides

हर element के चार margins होते हैं, हर side पर एक। आप उन्हें एक-एक करके तय कर सकते हैं, या एक साथ।

.card {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

यह लंबा रूप है। Shorthand यही काम एक line में करता है, और values ऊपर से घड़ी की दिशा में चलती हैं: top, right, bottom, left। घड़ी की तरह सोचिए — 12, 3, 6, 9।

सिंटैक्स — shorthand, चार तरीके

.a { margin: 20px; }              /* all four sides: 20px */
.b { margin: 10px 30px; }          /* top/bottom 10px, left/right 30px */
.c { margin: 10px 20px 30px; }     /* top 10px, left/right 20px, bottom 30px */
.d { margin: 10px 20px 30px 40px; } /* top 10, right 20, bottom 30, left 40 */

एक value से चारों sides को वही मिलता है। दो values में पहली top और bottom है, दूसरी left और right। तीन में पहली top, दूसरी left और right, तीसरी bottom। चार में वे घड़ी की दिशा में चलते हैं: top, right, bottom, left। "एक से चार values" वाला यह pattern margin, padding और border-width — तीनों में चलता है। एक बार सीख लीजिए, हर जगह इस्तेमाल कीजिए।

margin: auto से बीच में लाना

Margin की सबसे मशहूर trick है box को बीच में लाना। Box को एक fixed width दीजिए, फिर उसके left और right margins को auto कर दीजिए — browser बची हुई जगह दोनों तरफ बराबर बाँट देता है, और box बीच में बैठ जाता है।

.card {
  width: 400px;
  margin: 20px auto;
}

इसे ऐसे पढ़िए: ऊपर-नीचे 20 pixel जगह, और left-right automatic बराबर margins। Width ज़रूरी है — उसके बिना box पूरी line भरकर फैल जाता है, बाँटने के लिए कोई बची जगह ही नहीं रहती, और auto कुछ नहीं करता। यही CSS का सबसे आम "बीच में क्यों नहीं आ रहा?" सवाल है, और जवाब लगभग हमेशा होता है "आप width भूल गए"।

Margin collapse — हैरान करने वाला व्यवहार

यहाँ margin का वह एक व्यवहार है जो सबको उलझा देता है। जब दो block elements ऊपर-नीचे रखे हों, तो उनके margins जुड़ते नहीं हैं। इसके बजाय वे collapse हो जाते हैं: बड़ा margin जीतता है, छोटा गायब हो जाता है।

/* Two paragraphs, each with margin-bottom: 20px */
p { margin: 0 0 20px 0; }

अगर पहले paragraph का bottom margin 20px है और दूसरे का top margin 30px है, तो उनके बीच का gap 30px होगा — 50px नहीं। Margins बड़े वाले में collapse हो जाते हैं। यही parent और उसके पहले child के बीच भी होता है: child का top margin "बाहर निकलकर" parent को नीचे धकेल सकता है। आम fix हैं parent को थोड़ी padding देना, border देना, या flexbox इस्तेमाल करना — ये सभी collapse को रोक देते हैं।

आम गलतियाँ

• यह उम्मीद करना कि vertical margins जुड़ जाएँगे — वे बड़े वाले में collapse हो जाते हैं। 20px bottom margin + 30px top margin = 30px gap, 50px नहीं।
• बिना width के margin: auto इस्तेमाल करना — box पूरी line भर लेता है, इसलिए बीच में लाने के लिए कुछ बचता ही नहीं।
• Vertical centring के लिए margin: auto इस्तेमाल करना — यह सिर्फ horizontal काम करता है। Vertical centring के लिए flexbox या grid चाहिए।
• घड़ी की दिशा वाला क्रम भूल जाना — margin: 10px 20px 30px 40px; top, right, bottom, left है, top, left, bottom, right नहीं।
• पेज के पहले element पर top margin लगाकर यह सोचना कि पूरा पेज नीचे क्यों खिसक गया — वह child का margin parent से collapse होकर बाहर निकल गया है।

याद रखें

• Margin border के बाहर की जगह है; padding उसके अंदर की जगह है।
• Shorthand की values ऊपर से घड़ी की दिशा में चलती हैं: top, right, bottom, left।
• margin: 0 auto; block को बीच में लाता है — पर तभी जब उसकी width तय हो।
• Vertical margins collapse होते हैं: बड़ा वाला जीतता है, वे कभी जुड़ते नहीं।
• Margins negative हो सकते हैं; padding नहीं।

उदाहरण समझिए

• .card { width: 400px; margin: 20px auto; } — card 400 pixel चौड़ा है, और auto left-right margins बची जगह बराबर बाँट देते हैं, इसलिए वह पेज के बीच में बैठता है।
• .row { margin: 10px 20px 30px 40px; } — चार values वाला shorthand, घड़ी की दिशा में: ऊपर 10px, दाईं ओर 20px, नीचे 30px, बाईं ओर 40px।
• p { margin: 0 0 20px 0; } — हर paragraph का top margin शून्य और bottom margin 20px है, इसलिए दो paragraphs के बीच gap 20px है — 40px नहीं, क्योंकि margins collapse हो जाते हैं।
• .badge { margin-top: -12px; } — negative top margin badge को 12 pixel ऊपर खींच लेता है, इसलिए वह sticker की तरह card के ऊपर वाले किनारे पर चढ़ जाता है।