सीएसएस मार्जिन

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

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

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

सीएसएस मार्जिन

CSS मार्जिन गुण का उपयोग किसी तत्व के चारों ओर स्थान बनाने के लिए किया जाता है। यह स्थान आपको किसी भी सीमा के बाहर, वेब पेज पर विभिन्न तत्वों को आसानी से अलग करने की अनुमति देता है।

सीएसएस में, चार उप-प्रॉपर्टी के लिए मार्जिन प्रॉपर्टी शॉर्टहैंड है। इन सबप्रॉपर्टी का उपयोग वेब तत्व के लिए ऊपर, दाएं, नीचे और बाएं हाशिये को सेट करने के लिए किया जाता है।

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

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

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

CSS मार्जिन व्यक्तिगत पक्ष

वेब तत्व के प्रत्येक पक्ष के लिए मार्जिन सेट करने के लिए निम्नलिखित गुणों का उपयोग किया जाता है:

मार्जिन-टॉप
मार्जिन-दाएं
मार्जिन-नीचे
मार्जिन-बाएं

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

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

आइए एक उदाहरण के माध्यम से चर्चा करें कि मार्जिन उप-प्रॉपर्टी कैसे काम करती है।

मान लीजिए कि हम एक बॉक्स डिजाइन कर रहे हैं और हम इसे वेब पेज पर अन्य तत्वों से अलग करने के लिए अपने बॉक्स के चारों ओर मार्जिन शामिल करना चाहते हैं। हमारे बॉक्स का टॉप मार्जिन 50px, लेफ्ट मार्जिन 30px, राइट मार्जिन 40px और निचला मार्जिन 50px होना चाहिए। हम निम्नलिखित कोड का उपयोग करके इस बॉक्स को बना सकते हैं:

index.html

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

styles.css

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

.outer {
	border: 1px solid blue;
}

हमारा कोड लौटाता है:

हमारे कोड में, हमने दो बॉक्स बनाए हैं। पहला बॉक्स, जिसे

टैग का उपयोग करके परिभाषित किया गया है, को outer वर्ग असाइन किया गया है . हमारी CSS फ़ाइल में, हम बताते हैं कि outer . के साथ कोई भी तत्व कक्षा में 1px-चौड़ा ठोस नीला बॉर्डर होना चाहिए। हमने इस बॉर्डर को उस मार्जिन को दिखाने के लिए परिभाषित किया है जो हमारे आंतरिक बॉक्स ने बनाया है।

हमारे

टैग के अंदर एक

टैग होता है, जिसमें टेक्स्ट होता है This is a box . हमारे

टैग का वर्ग नाम box . है , जिसका अर्थ है box . की शैली हमारी CSS फ़ाइल में हमारे

तत्व पर लागू होती है।

हमारे

टैग को 50px शीर्ष मार्जिन, 30px बायां हाशिया, 40px दायां हाशिया और 40px निचला मार्जिन असाइन किया गया है। हमने अपने

टैग को 1px चौड़ा ठोस लाल बॉर्डर भी दिया है। जैसा कि आप ऊपर की इमेज में देख सकते हैं, हमारे मार्जिन ने हमारे

बॉक्स के बॉर्डर और हमारे ब्लू बॉक्स के बीच एक गैप बनाया है। अगर हमारे पास कोई मार्जिन नहीं होता, तो ये बॉक्स एक-दूसरे के करीब होते।

CSS मार्जिन शॉर्टहैंड

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

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

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

चार मान

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

यदि आप मार्जिन प्रॉपर्टी के साथ चार मान निर्दिष्ट करते हैं, तो आपका मार्जिन प्रदर्शित होने का क्रम इस प्रकार है:

पहला मान शीर्ष मार्जिन है।
दूसरा मान सही मार्जिन है।
तीसरा मान निचला मार्जिन है।
चौथा मान बायां हाशिया है।

मान लीजिए कि हम 25px शीर्ष मार्जिन, 25px दाएँ मार्जिन, 50px निचला मार्जिन और 60px बाएँ हाशिया के साथ एक बॉक्स बनाना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

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

हमारा कोड लौटाता है:

हमारे उदाहरण में, हमने ऊपर निर्दिष्ट मूल्यों के आधार पर प्रत्येक किनारे पर एक अलग मार्जिन के साथ एक आंतरिक बॉक्स बनाया है। हमने अपने आंतरिक बॉक्स को 1px-चौड़े ठोस लाल मार्जिन के साथ भी घेर लिया है। इसके अलावा, हम अपने बॉक्स पर लागू किए गए हाशिये के आकार को स्पष्ट करने के लिए अपने नीले बॉक्स के लिए कोड का पहले से पुन:उपयोग करते हैं।

तीन मान

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

आपके द्वारा निर्दिष्ट तीन हाशिये को एक बॉक्स पर लागू करने का क्रम इस प्रकार है:

पहला मान शीर्ष मार्जिन है।
दूसरा मान किसी तत्व के दाएं और बाएं किनारों के लिए मार्जिन है।
तीसरा मान निचला मार्जिन है।

मान लीजिए कि हम बॉक्स के शीर्ष पर 50px मार्जिन के साथ एक बॉक्स बनाना चाहते हैं, बॉक्स के बाईं और दाईं ओर 25px मार्जिन और बॉक्स के नीचे 60px मार्जिन है। हम निम्नलिखित कोड का उपयोग करके इन मार्जिन के साथ एक बॉक्स बना सकते हैं:

हमारा कोड लौटाता है:

तीन मान

पहला मान शीर्ष मार्जिन है।
दूसरा मान किसी तत्व के दाएं और बाएं किनारों के लिए मार्जिन है।
तीसरा मान निचला मार्जिन है।

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

हमारा कोड लौटाता है:

जैसा कि आप देख सकते हैं, हमारे इनर बॉक्स के बाएँ और दाएँ पक्षों का मार्जिन मान समान है—25px—और ऊपर और नीचे के पक्षों का अपना मार्जिन (क्रमशः 50px और 60px) है।

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

दो मान

यदि आप चाहते हैं कि बॉक्स के ऊपर और नीचे के लिए समान मार्जिन मान हो और बॉक्स के दाएं और बाएं किनारों के लिए एक और मान हो, तो आप मार्जिन प्रॉपर्टी का उपयोग कर सकते हैं और दो मान निर्दिष्ट कर सकते हैं।

जिस क्रम में आपके द्वारा निर्दिष्ट मान किसी तत्व पर लागू होते हैं वह है:

पहला मान बॉक्स के ऊपर और नीचे का मार्जिन है।
दूसरा मान बॉक्स के दाएं और बाएं किनारों के लिए मार्जिन है।

मान लें कि आप 50px वर्टिकल मार्जिन और 30px हॉरिजॉन्टल मार्जिन वाला बॉक्स बनाना चाहते हैं। आप इस बॉक्स को निम्नलिखित CSS शैली का उपयोग करके बना सकते हैं:

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

हमारा कोड लौटाता है:

हमारे बॉक्स के ऊपर और नीचे का मार्जिन 50px है, और बाएँ और दाएँ दोनों पक्षों में 30px मार्जिन है।

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

एक मान

यदि आप चाहते हैं कि किसी बॉक्स के प्रत्येक पक्ष का मार्जिन समान हो, तो आपको मार्जिन गुण का उपयोग करते समय केवल एक मान निर्दिष्ट करना होगा। आपके द्वारा निर्दिष्ट मान एक बॉक्स के लिए सभी सीमाओं के आसपास निर्धारित मार्जिन होगा।

मान लीजिए कि आप सभी सीमाओं के चारों ओर 50px सिंगल मार्जिन वाला बॉक्स बनाना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

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

हमारा कोड लौटाता है:

हमारे बॉक्स के हर बॉर्डर का 50px मार्जिन है। हमने यह दिखाने के लिए अपने बॉक्स के चारों ओर एक लाल बॉर्डर निर्दिष्ट किया है कि हमारे मार्जिन बॉक्स की सीमा के बाहर लागू होते हैं, और हमने एक नीला बॉक्स भी बनाया है जिसमें हमारे मार्जिन को बेहतर ढंग से दर्शाने के लिए हमारे लाल बॉक्स को रखा गया है।

मार्जिन इनहेरिट

इनहेरिट वैल्यू का इस्तेमाल पैरेंट एलिमेंट से मार्जिन इनहेरिट करने के लिए किया जाता है।

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

मान लीजिए कि हम एक बॉक्स डिजाइन कर रहे हैं जिसके मूल तत्व में 50px बायां मार्जिन है। हम चाहते हैं कि हमारे मूल तत्व में निहित बॉक्स में समान मार्जिन मान हो। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

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

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

हमारा कोड लौटाता है:

हमारे बाहरी बॉक्स (नीले रंग की सीमा वाला) का बायां हाशिया 50px है। इसके अलावा, हमारे इनर बॉक्स (लाल बॉर्डर वाला) का बायां मार्जिन 50px है, जो इसे अपने मूल तत्व से विरासत में मिला है।

मार्जिन ऑटो

स्वत:मान का उपयोग किसी तत्व को उसके कंटेनर में क्षैतिज रूप से केंद्रित करने के लिए किया जाता है।

ऑटो मान आपके द्वारा परिभाषित मान के आधार पर एक आंतरिक तत्व को एक निश्चित चौड़ाई तक ले जाएगा, फिर शेष स्थान को बाएँ और दाएँ हाशिये के बीच विभाजित किया जाएगा।

मान लीजिए कि आपने 500px चौड़ाई वाले बॉक्स के अंदर 250px चौड़ाई वाला बॉक्स बनाया है। यदि आपने मार्जिन बनाने के लिए ऑटो कीवर्ड का उपयोग किया है, तो बॉक्स के बाएँ और दाएँ दोनों पर एक 125px मार्जिन लागू किया जाएगा। हमने निम्न सूत्र का उपयोग करके इसकी गणना की:

(Outer Box Width - Inner Box Width) / 2

इस मामले में, हमने अपने स्वचालित रूप से उत्पन्न मार्जिन के पक्ष की गणना करने के लिए निम्नलिखित योग का उपयोग किया:

(500 - 250) / 2

इस समस्या का उत्तर 125 है, जो कि एक बॉक्स के बाएँ और दाएँ हाशिये पर लागू होने वाला मार्जिन मान है। इन आयामों का उपयोग करने वाले बॉक्स का उदाहरण यहां दिया गया है:

index.html

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

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

हमारा कोड लौटाता है:

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

हमारे इनर बॉक्स में ऊपर या नीचे के किनारों पर कोई मार्जिन नहीं है, क्योंकि हमने अपने उदाहरण के लिए कोई मार्जिन निर्दिष्ट नहीं किया है।

निष्कर्ष

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

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