CSS Margin: वेब डिज़ाइन में स्पेसिंग का पूरा गाइड

CSS Margin क्या है?

वेब पेज पर एलिमेंट्स के बीच स्पेस जोड़ना, आकर्षक और फंक्शनल यूज़र एक्सपीरियंस डिज़ाइन करने का अहम हिस्सा है। मार्जिन का उपयोग HTML एलिमेंट के चारों ओर एक खाली क्षेत्र बनाने के लिए किया जाता है, ताकि उसे पेज पर मौजूद अन्य ऑब्जेक्ट्स से अलग किया जा सके।

CSS Margin प्रॉपर्टी और इसके सब-प्रॉपर्टीज़

CSS margin प्रॉपर्टी और इसकी चार सब-प्रॉपर्टीज़ का उपयोग HTML में किसी एलिमेंट के चारों ओर मार्जिन सेट करने के लिए किया जाता है। यह प्रॉपर्टी एलिमेंट के बॉर्डर के बाहर स्पेस बनाती है।

CSS बॉक्स मॉडल में हर एलिमेंट एक या अधिक बॉक्स से बना होता है। मार्जिन बॉक्स मॉडल के मुख्य कंपोनेंट्स में से एक है और यह बॉक्स मॉडल की सबसे बाहरी लेयर पर मौजूद होता है। नीचे दिए गए ग्राफ़िक में आप देख सकते हैं कि मार्जिन HTML एलिमेंट के बॉर्डर के बाहर लागू होता है:

CSS Margin इंडिविजुअल साइड्स

किसी वेब एलिमेंट के प्रत्येक साइड के लिए मार्जिन सेट करने के लिए निम्न प्रॉपर्टीज़ उपयोग की जाती हैं:

• margin-top
• margin-right
• margin-bottom
• margin-left

ये प्रॉपर्टीज़ आपको एलिमेंट के किसी एक साइड के लिए मार्जिन परिभाषित करने की अनुमति देती हैं। इनमें से प्रत्येक प्रॉपर्टी मार्जिन का आकार निर्धारित करने के लिए चार मानों में से एक स्वीकार करती है:

• length - px, em, या अन्य CSS लेंथ माप का उपयोग करके मार्जिन निर्दिष्ट करता है।
• percentage (%) - उस एलिमेंट की चौड़ाई के प्रतिशत के रूप में मार्जिन निर्दिष्ट करता है जिस पर मार्जिन लागू होता है।
• auto - ब्राउज़र को मार्जिन की गणना करने का निर्देश देता है।
• inherit - निर्दिष्ट करता है कि मार्जिन पैरेंट एलिमेंट से इनहेरिट किया जाना चाहिए।

उदाहरण: इंडिविजुअल मार्जिन प्रॉपर्टीज़

मान लीजिए हम एक बॉक्स डिज़ाइन कर रहे हैं और चाहते हैं कि उसके चारों ओर मार्जिन हों ताकि वह पेज पर अन्य एलिमेंट्स से अलग रहे। हमारे बॉक्स में होना चाहिए:

• टॉप मार्जिन: 50px
• लेफ्ट मार्जिन: 30px
• राइट मार्जिन: 40px
• बॉटम मार्जिन: 50px

/* HTML */
<div class="outer">
  <p class="box"> This is a box. </p>
</div>

/* CSS */
.box {
  margin-top: 50px;
  margin-left: 30px;
  margin-right: 40px;
  margin-bottom: 40px;
  border: 1px solid red;
}
.outer {
  border: 1px solid blue;
}

इस कोड में हमने दो बॉक्स बनाए हैं। बाहरी बॉक्स (<div>) को outer क्लास दी गई है, जिसे 1px चौड़ा नीला बॉर्डर दिया गया है। आंतरिक बॉक्स (<p>) को box क्लास दी गई है, जिसमें ऊपर बताए गए मार्जिन और 1px लाल बॉर्डर है। जैसा कि इमेज में दिखाया गया है, मार्जिन ने दोनों बॉक्स के बॉर्डर के बीच गैप बनाया है।

CSS Margin शॉर्टहैंड

ऊपर के उदाहरण में हमने चार लाइनों का उपयोग किया। margin शॉर्टहैंड प्रॉपर्टी का उपयोग करके हम इसे एक ही लाइन में लिख सकते हैं। यह प्रॉपर्टी चार सब-प्रॉपर्टीज़ का शॉर्टहैंड है और आपको एक ही लाइन में चारों मार्जिन निर्दिष्ट करने की अनुमति देती है।

आप कितने मान निर्दिष्ट करते हैं, इसके आधार पर शॉर्टहैंड सिंटैक्स बदलता है। न्यूनतम एक और अधिकतम चार मान निर्दिष्ट किए जा सकते हैं। आइए सभी संभावित उपयोग देखें:

चार मान (Four Values)

जब आप चार मान निर्दिष्ट करते हैं, तो उनका क्रम निम्न होता है:

1. पहला मान: टॉप मार्जिन
2. दूसरा मान: राइट मार्जिन
3. तीसरा मान: बॉटम मार्जिन
4. चौथा मान: लेफ्ट मार्जिन

.box {
  margin: 25px 25px 50px 60px;
  border: 1px solid red;
}

यह कोड 25px टॉप, 25px राइट, 50px बॉटम और 60px लेफ्ट मार्जिन बनाता है।

तीन मान (Three Values)

जब आप अलग टॉप और बॉटम मार्जिन चाहते हैं, लेकिन लेफ्ट और राइट के लिए समान मार्जिन:

1. पहला मान: टॉप मार्जिन
2. दूसरा मान: राइट और लेफ्ट मार्जिन (दोनों के लिए समान)
3. तीसरा मान: बॉटम मार्जिन

.box {
  margin: 50px 25px 60px;
  border: 1px solid red;
}

यह 50px टॉप, 25px लेफ्ट/राइट, और 60px बॉटम मार्जिन बनाता है।

दो मान (Two Values)

जब टॉप/बॉटम के लिए समान और लेफ्ट/राइट के लिए समान मार्जिन चाहिए:

1. पहला मान: टॉप और बॉटम मार्जिन
2. दूसरा मान: राइट और लेफ्ट मार्जिन

.box {
  margin: 50px 30px;
  border: 1px solid red;
}

यह 50px वर्टिकल (टॉप/बॉटम) और 30px हॉरिजॉन्टल (लेफ्ट/राइट) मार्जिन बनाता है।

एक मान (One Value)

जब चारों तरफ समान मार्जिन चाहिए:

.box {
  margin: 50px;
  border: 1px solid red;
}

यह चारों तरफ 50px मार्जिन लागू करता है।

Margin Inherit

inherit मान का उपयोग पैरेंट एलिमेंट से मार्जिन इनहेरिट करने के लिए किया जाता है। यह उपयोगी है क्योंकि अगर आप पैरेंट एलिमेंट का मार्जिन बदलते हैं, तो चाइल्ड एलिमेंट का मार्जिन ऑटोमैटिकली एडजस्ट हो जाएगा।

.box {
  margin-left: inherit;
  border: 1px solid red;
}
.outer {
  margin-left: 50px;
  border: 1px solid blue;
}

यहां बाहरी बॉक्स (नीला बॉर्डर) का लेफ्ट मार्जिन 50px है, और आंतरिक बॉक्स (लाल बॉर्डर) ने वही 50px लेफ्ट मार्जिन इनहेरिट किया है।

Margin Auto - हॉरिजॉन्टल सेंटरिंग

auto मान का उपयोग किसी एलिमेंट को उसके कंटेनर में हॉरिजॉन्टली सेंटर करने के लिए किया जाता है। ब्राउज़र एलिमेंट की निर्धारित चौड़ाई के आधार पर शेष स्पेस को लेफ्ट और राइट मार्जिन में बराबर बांट देता है।

उदाहरण: 500px चौड़े कंटेनर में 250px चौड़ा बॉक्स:

(Outer Box Width - Inner Box Width) / 2
(500 - 250) / 2 = 125px

इसलिए लेफ्ट और राइट दोनों तरफ 125px मार्जिन लागू होगा।

/* HTML */
<div class="outer">
  <p class="box"> This is a box. </p>
</div>

/* CSS */
.box {
  width: 250px;
  margin: auto;
  border: 1px solid red;
}
.outer {
  width: 500px;
  border: 1px solid blue;
}

जैसा कि आप देख सकते हैं, आंतरिक बॉक्स हॉरिजॉन्टली सेंटर हो गया है। ध्यान दें कि टॉप और बॉटम पर कोई मार्जिन नहीं है क्योंकि हमने केवल margin: auto निर्दिष्ट किया था।

निष्कर्ष

CSS margin प्रॉपर्टी का उपयोग किसी एलिमेंट के बॉर्डर और पेज पर अन्य एलिमेंट्स के बीच स्पेस बनाने के लिए किया जाता है। इस ट्यूटोरियल में हमने उदाहरणों के साथ चर्चा की कि कैसे margin प्रॉपर्टी और इसकी चार सब-प्रॉपर्टीज़ का उपयोग करके वेब एलिमेंट्स के बीच स्पेस बनाया जाता है। अब आप CSS मार्जिन प्रॉपर्टी का उपयोग एक प्रो की तरह करने के लिए तैयार हैं!