CSS मार्जिन
आप बॉक्स रंगते हैं, बॉर्डर खींचते हैं और कोने गोल करते हैं। अगला कौशल: बॉक्सों को अलग धकेलना। margin तत्व के चारों ओर बाहरी गैप है — साँस लेने की जगह बॉर्डर के बाहर।
margin क्या है?
Margin तत्व के बॉर्डर के बाहर खाली जगह है। एक बॉक्स को पड़ोसियों से अलग करता है। वह तत्व की बैकग्राउंड को इस गैप में नहीं रंगता — गैप भरे क्षेत्र के बाहर है।
Margin बनाम padding (छोटा अंतर)
Padding (अगला पाठ) बॉर्डर के अंदर है — सामग्री और किनारे के बीच। Margin बॉर्डर के बाहर है — इस बॉक्स और अगले के बीच। आज एक पंक्ति याद रखें: margin = बाहर, padding = अंदर।
शॉर्टकट: कितने मान?
आप एक, दो, तीन या चार लंबाइयाँ दे सकते हैं। भुजाओं का क्रम तय है।
📊 margin शॉर्टकट मानों की संख्या
| मान | अर्थ | रोज़ाना नोट |
|---|---|---|
| 1 | चारों भुजाएँ एक जैसी | कार्ड के चारों ओर समान साँस |
| 2 | ऊपर+नीचे, फिर बाएँ+दाएँ | ऊर्ध्वाधर और क्षैतिज जोड़ी |
| 3 | ऊपर, बाएँ+दाएँ, नीचे | कम आम — अस्तित्व जानें |
| 4 | ऊपर, दाएँ, नीचे, बाएँ | पूरा नियंत्रण, ऊपर से घड़ी की दिशा |
हर भुजा पर समान जगह
सभी भुजाओं के लिए एक लंबाई से शुरू करें।
सभी भुजाओं पर समान margin
css.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}दो मान — ऊर्ध्वाधर, फिर क्षैतिज
दो लंबाइयाँ विपरीत भुजाओं को जोड़ती हैं: पहले ऊपर और नीचे; फिर बाएँ और दाएँ।
ऊर्ध्वाधर फिर क्षैतिज margin
css.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}चार मान — ऊपर से घड़ी की दिशा
जब हर भुजा को अपनी गैप चाहिए: ऊपर → दाएँ → नीचे → बाएँ।
चार-भुजा margin शॉर्टकट
css.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}auto से ब्लॉक सेंटर करना
निश्चित चौड़ाई वाले ब्लॉक-स्तरीय बॉक्स के लिए margin-left: auto और margin-right: auto (अक्सर margin: 0 auto) बची जगह दोनों तरफ़ बाँटते हैं — क्षैतिज सेंटर का क्लासिक तरीका।
auto से क्षैतिज सेंटर
css.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}ऊर्ध्वाधर margin collapse हो सकते हैं
जब दो ब्लॉक तत्व ढेर होते हैं, पहले का नीचे का margin और दूसरे का ऊपर का margin अक्सर एक गैप में मिल (collapse) जाते हैं — आमतौर पर दोनों में बड़ा, योग नहीं। शुरुआती हैरान होते हैं; ढेर पैराग्राफ और सेक्शन के बीच इसकी अपेक्षा रखें।
ढेर ब्लॉक और margin collapse
css.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}
.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* उनके बीच अक्सर लगभग 24px दिखता है, 48px नहीं */एक भुजा एक बार
margin-top जैसी लंबी प्रॉपर्टी तब बढ़िया जब सिर्फ़ शीर्षक के ऊपर या बटन के नीचे जगह चाहिए।
केवल ऊपर का margin
css.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}खुद आज़माएँ
- दो कार्डों को
margin: 16pxदें और बाहरी गैप देखें। - एक को
margin: 24px 12pxलिखें और ऊर्ध्वाधर बनाम क्षैतिज नोट करें। - 280px चौड़े बॉक्स को
margin: 0 autoसे सेंटर करें। - दो रंगीन ब्लॉक
margin-bottomऔरmargin-topदोनों 24px के साथ ढेर करें — गैप 24 जैसा लगता है या 48? - शीर्षक को केवल
margin-topसे दूरी दें।
आम गलतियाँ
- margin लगाना जब मतलब padding था (टेक्स्ट के लिए अंदरूनी गद्दी)
- उम्मीद कि
margin: autoहर flex/grid आइटम को साधारण ब्लॉक की तरह सेंटर करेगा (लेआउट संदर्भ मायने रखता है) - ऊपर और नीचे margin जोड़कर मान लेना कि वे हमेशा जुड़ते हैं (collapse गैप घटा सकता है)
- हर जगह विशाल margin के बजाय छोटा, सुसंगत पैमाना
- चार मानों का क्रम गड़बड़ करना (ऊपर, दाएँ, नीचे, बाएँ)
सार
- Margin बॉर्डर के बाहर बाहरी जगह है
- शॉर्टकट: 1, 2 या 4 मान (चार ऊपर से घड़ी की दिशा)
margin: 0 autoनिश्चित चौड़ाई वाले ब्लॉक को क्षैतिज सेंटर करता है- ढेर ब्लॉकों के बीच ऊर्ध्वाधर margin collapse हो सकते हैं
- एक भुजा के लिए लंबी प्रॉपर्टी इस्तेमाल करें
- Padding अंदरूनी चचेरा भाई है — अगला पाठ
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी