CSS margin क्या है - ldkalink
CSS margin kya hai: इससे पहले वाले आर्टिकल में CSS क्या होता है इसके बारे में हमने विस्तार से जाना था पर आज के इस आर्टिकल में www.ldkalink.com पर हम CSS margin क्या होता है इसके बारे में जानने वाले हैं स्टेप बाय स्टेप हम इसके बारे में समझने वाले है।
 |
| CSS margin क्या है |
CSS margin क्या है?
what is CSS margin in Hind: "एक एलिमेंट्स कंटेंट के बॉर्डर के बहार साइड, चारों ओर स्पेस क्रिएट करने के लिए CSS margin का उपयोग किया जाता है" एलिमेंट्स कंटेंट का मतलब कोई भी पैराग्राफ, टेक्स्ट, या इमेज हो सकता है या फिर कोई आइकन भी हो सकता है।
आपने कभी नोटिस किया होगा कि जब भी हम किसी वेबसाइट पर जाते हैं और उसके किसी वेब पेज को ओपन करते हैं तो हम देखते हैं कि वेब पेज में हर कंटेंट एक प्रॉपर तरीके से मैनेज किया गया होता है।
उदाहरण के लिए यदि हम किसी वेबसाइट के नेविगेशन बार को देखते हैं नेविगेशन बार मतलब हेडर में जो मेनू लगे होता है इसे नेविगेशन बार कहते हैं।
नेविगेशन बार में मीनू आइटम के अंतर्गत जैसे कि होम पेज या फिर अन्य कोई और नाम जो एक दूसरे से कुछ दूरी पर होते हैं जो देखने में बहुत ही अच्छा लगता रहता है तो यह सब डिजाइन सीएसएस मार्जिन के जरिए किया जाता है।
जब हम चाहते है एक एलिमेंट कंटेंट के बॉर्डर के चारो हो स्पेस क्रिएट हो जाये तो इसके लिए ही CSS margin properties का उपयोग किया जाता है।
CSS margin
एलिमेंट कंटेंट के बॉर्डर के चारो ओर बहार की ओर, कितना स्पेस किस तरफ से छोड़ना है इसका पूरा कंट्रोल हम अपने CSS margin के जरिए बड़ी आसानी से कर सकते है।
CSS padding - individual sides
यदि हम चाहते हैं कि कंटेंट के किसी एक साइड से स्पेस छोड़ना है तो इसके लिए हम जिस साइड में स्पेस बनाना है उस साइड के लिए CSS कोडिंग का use कर सकते हैं।
- margin-top
- margin-right
- margin-bottom
- margin-left
मार्जिन प्रॉपर्टीज की वैल्यू को हम अलग अलग फॉर्मेट में दर्शा सकते हैं:
- Length - जब हमें कंटेंट के लेंथ में स्पेस छोड़ना होता है तो हम इसमें से अपने जरूरत के अनुसार इनके वैल्यू को उपयोग में ला सकते हैं यदि हमें पिक्सल में चाहिए होता है तो px लिखते हैं यदि हमें सेंटीमीटर में चाहिए होता है तो हम cm लिखते हैं इसके अलावा भी इसमें कई तरह के वैल्यूज होते हैं जरूरत के अनुसार आप इनका उपयोग कर सकते हैं।
- % - कंटेंट एलिमेंट्स के विड्थ को हम % में भी सेट कर सकते है।
- inherit - यह भी ध्यान रखे की पैरेंट एलिमेंट्स को पैडिंग से इन्हेरिट किया जाना चाहिए।
Note: यह किसी भी तरह के नेगेटिव वैल्यू के लिए लागू नहीं होता है।
Example
माना एक <div> element है और इसके अंदर कुछ content लिखा हुआ है हम चाहते है इस content के चारो ओर बहार की ओर स्पेस छूटा हुआ हो तो इसके लिए हम इस css margin properties का उपयोग करते है।
div {margin-top: 25px;margin-right: 50px;margin-bottom: 70px;margin-left: 100px;}
इस कोड की सहायता से कंटेंट के ऊपर की ओर 25 पिक्सल का स्पेस बन जाएगा इसी तरह से कंटेंट के राइट साइड में 50 पिक्सल का स्पेस छोड़ा जाएगा, इसी तरह से कंटेंट के नीचे में 70 पिक्सल और लेफ्ट में 100 पिक्सल का स्पेस बना दिया जाएगा।
यदि इस कोड को आप अगर ध्यान से देखेंगे तो इसमें बार-बार मार्जिन शब्द लाया जा रहा है यदि हम इसे एक बार में ही लिखते हैं तो इसमें समय की बचत होती है और यह कोडिंग लंबा भी नही है।
यदि हम चाहते हैं कि एक ही बार मर्जिंग लिखने पर चारों तरफ के पिक्सल्स अलग अलग सेट हो जाए तो इसके लिए हम सीएसएस शॉर्थन्ड मेथड उपयोग कर सकते हैं।
margin shorthand properties
इस प्रॉपर्टीज का उपयोग तब किया जाता है जब हम चाहते हैं कि एक ही प्रॉपर्टीज में सारे मार्जिन प्रॉपर्टीज शामिल हो जाए तो इसके लिए वेडिंग शॉर्ट हैंड प्रॉपर्टीज का उपयोग किया जाता है।
इसके उपयोग से समय की बचत होती है और कोडिंग भी ज्यादा लंबा नही होता है इसका उपयोग हम निम्न तरह से कर सकते हैं जिसको उदाहरण के रूप में नीचे स्टेप बाय स्टेप बताया गया है।
शॉर्ट हैंड प्रॉपर्टीज का उपयोग का उपयोग हम जरूरत के अनुसार अलग अलग तरीके से कर सकते है।
- margin-top
- margin-right
- margin-bottom
- margin-left
जब margin प्रॉपर्टीज में चार वैल्यूज हो:
margin: 25px 50px 70px 100px;
- टॉप में 25px का स्पेस छोड़ा जाएगा
- राइट में 50px का स्पेस छोड़ा जाएगा
- बॉटम में 70px का स्पेस छोड़ा जाएगा
- लेफ्ट में 100px का स्पेस छोड़ा जाएगा
इस इस तरह से आप एक मार्जिन प्रॉपर्टीज का यूज़ करके चारों तरफ स्पेस बना सकते हैं इसके लिए आप निचे दिए गए कोड का उपयोग कर सकते है।
Example (उदहारण)
div {margin-top: 25px;margin-right: 50px;margin-bottom: 70px;margin-left: 100px;}
जब margin प्रॉपर्टीज में तीन वैल्यूज हो:
margin: 25px 50px 70px;
- टॉप में 25px का स्पेस छोड़ा जाएगा
- राइट और लेफ्ट में 50px का स्पेस छोड़ा जाएगा
- बॉटम में 70px का स्पेस छोड़ा जाएगा
Example (उदहारण)
div {margin: 25px 50px 70px ;}
जब margin प्रॉपर्टीज में दो वैल्यूज हो:
margin: 25px 50px;
- टॉप और बॉटम में 25px का स्पेस बनाएगा
- राइट और लेफ्ट में 50px का स्पेस बनाएगा
Example (उदहारण)
div {margin: 25px 50px;}
जब margin प्रॉपर्टीज में एक वैल्यूज हो
margin: 25px;
पेंडिंग प्रॉपर्टीज में एक वैल्यू होने पर यह कंटेंट के चारो ओर से सेम स्पेस बनाता है उपर, नीचे, लेफ्ट, राइट चारो तरफ से समान जगह छोड़ा जाता है।
Example (उदहारण)
div {margin: 25px;}
margin और elements width
css margin width प्रॉपर्टीज एलिमेंट्स कंटेंट एरिया के चौड़ाई को बताता है मार्जिन मॉडल बॉक्स के बॉर्डर और मार्जिन के बाहर का भाग होता है।
यदि किसी एलिमेंट्स के लिए इसकी विड्थ दी जाती है और यदि इसमें पैडिंग का भी उपयोग किया जाता है तो एलिमेंट्स के लिए यूज़ की गई पैडिंग को भी एलिमेंट्स के कुछ विड्थ में काउंट कर दी जाती है यह एक describable रिजल्ट होता है।
Example
उदहारण के लिए मान लेते है एक <div> एलिमेंट है और इसकी width 300px है लेकिन इसकी एक्चुअल विड्थ 350 px (300px + लेफ्ट पैडिंग के 25px + राइट पैडिंग का 25 px) होगा।
div {width:300px;margin:25;}
width 300px का उपयोग करने से पैडिंग का मात्रा से इस पर इसका कोई प्रभाव नहीं बढ़ता है आप box-sizing प्रॉपर्टी का यूज़ कर सकते है यह एलिमेंट्स की एक्चुअल साइज को बनाये रखता है यदि आप पैडिंग की वैल्यू को बढ़ाते है तो कंटेंट का जो स्पेस होगा वह घटेगा।
Example
div {width:300px;margin:25;box-sizing: border-box;}
इतना पढ़ने के बाद आप css margin क्या होता है इसके बारे में अच्छे से जान गए होंगे इसी तरह की अच्छी अच्छी जानकारी पाने के लिए इस ब्लॉग से हमेशा जुड़े रहे।