CSS padding क्या है - ldkalink

CSS padding kya hai: इससे पहले वाले आर्टिकल में CSS क्या होता है इसके बारे में हमने विस्तार से जाना था पर आज के इस आर्टिकल में www.ldkalink.com पर हम CSS padding क्या होता है इसके बारे में जानने वाले हैं स्टेप बाय स्टेप हम इसके बारे में समझने वाले है। 

CSS padding क्या है

CSS padding क्या है

what is CSS padding in Hind: "एक एलिमेंट्स कंटेंट के बॉर्डर के अंदर के चारो ओर, स्पेस क्रिएट करने के लिए CSS padding का उपयोग किया जाता है" एलिमेंट्स कंटेंट का मतलब कोई भी पैराग्राफ, टेक्स्ट, या इमेज हो सकता है या फिर कोई आइकन भी हो सकता है।

आपने कभी नोटिस किया होगा कि जब भी हम किसी वेबसाइट पर जाते हैं और उसके किसी वेब पेज को ओपन करते हैं तो हम देखते हैं कि वेब पेज में हर कंटेंट एक प्रॉपर तरीके से मैनेज किया गया होता है।

उदाहरण के लिए यदि हम किसी वेबसाइट के नेविगेशन बार को देखते हैं नेविगेशन बार मतलब हेडर में जो मेनू लगे होता है इसे नेविगेशन बार कहते हैं।

नेविगेशन बार में मीनू आइटम के अंतर्गत जैसे कि होम पेज या फिर अन्य कोई और नाम जो एक दूसरे से कुछ दूरी पर होते हैं जो देखने में बहुत ही अच्छा लगता रहता है तो यह सब डिजाइन सीएसएस पैडिंग के जरिए किया जाता है।

CSS padding 

वेबपेज में किसी एरिया के अंदर किसी कांटेक्ट को किस जगह पर दर्शाना है कितना स्पेस किस तरफ से छोड़ना है इसका पूरा कंट्रोल हम अपने CSS CODE के जरिए बड़ी आसानी से कर सकते है। 

CSS padding - individual sides 

यदि हम चाहते हैं कि कंटेंट के किसी एक साइड से स्पेस छोड़ना है तो इसके लिए हम जिस साइड में स्पेस बनाना है उस साइड के लिए CSS कोडिंग  का use कर सकते हैं।

• Padding-top
• Padding-right 
• Padding-bottom 
• Padding-left

पेंडिंग प्रॉपर्टीज की वैल्यू को हम अलग अलग फॉर्मेट में दर्शा सकते हैं:

• Length - जब हमें कंटेंट के लेंथ में स्पेस छोड़ना होता है तो हम इसमें से अपने जरूरत के अनुसार इनके वैल्यू को उपयोग में ला सकते हैं यदि हमें पिक्सल में चाहिए होता है तो px लिखते हैं यदि हमें सेंटीमीटर में चाहिए होता है तो हम cm लिखते हैं इसके अलावा भी इसमें कई तरह के वैल्यूज होते हैं जरूरत के अनुसार आप इनका उपयोग कर सकते हैं।
• % - कंटेंट एलिमेंट्स के विड्थ को हम % में भी सेट कर सकते है। 
• inherit - यह भी ध्यान रखे की पैरेंट एलिमेंट्स को पैडिंग से इन्हेरिट किया जाना चाहिए।  

Note: यह किसी भी तरह के नेगेटिव वैल्यू के लिए लागू नहीं होता है।

Example 

माना एक <div> element है और इसके अंदर कुछ content लिखा हुआ है हम चाहते है इस content के चारो ओर स्पेस छूटा हुआ हो तो इसके लिए हम इस css padding properties का उपयोग करते है। 

div {

Padding-top: 25px;

Padding-right: 50px;

Padding-bottom: 70px;

Padding-left: 100px;

}

इस कोड की सहायता से कंटेंट के ऊपर 25 पिक्सल का स्पेस बन जाएगा इसी तरह से कंटेंट के राइट साइड में 50 पिक्सल का स्पेस छोड़ा जाएगा, इसी तरह से कंटेंट के नीचे में 70 पिक्सल और लेफ्ट में 100 पिक्सल का स्पेस बना दिया जाएगा। 

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

यदि हम चाहते हैं कि एक ही कोडिंग में चारों तरफ के पिक्सल्स अलग अलग सेट हो जाए तो इसके लिए हम सीएसएस शॉर्थन्ड मेथड उपयोग कर सकते हैं।

Padding shorthand properties

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

इसके उपयोग से समय की बचत होती है और कोडिंग भी ज्यादा लंबा नही होता है इसका उपयोग हम निम्न तरह से कर सकते हैं जिसको उदाहरण के रूप में नीचे स्टेप बाय स्टेप बताया गया है।

शॉर्ट हैंड प्रॉपर्टीज का उपयोग  का उपयोग हम जरूरत के अनुसार अलग अलग तरीके से कर सकते है।  

• Padding-top
• Padding-right 
• Padding-bottom 
• Padding-left

जब padding  प्रॉपर्टीज में चार वैल्यूज हो:

• Padding: 25px 50px 70px 100px; 

• टॉप में 25px का स्पेस छोड़ा जाएगा
• राइट में 50px का स्पेस छोड़ा जाएगा
• बॉटम में 70px का स्पेस छोड़ा जाएगा
• लेफ्ट में 100px का स्पेस छोड़ा जाएगा

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

Example/उदहारण

div {

Padding-top: 25px;

Padding-right: 50px;

Padding-bottom: 70px;

Padding-left: 100px;

}

जब  padding  प्रॉपर्टीज में तीन वैल्यूज हो:

• Padding: 25px 50px 70px; 

• टॉप में 25px का स्पेस छोड़ा जाएगा
• राइट और लेफ्ट में 50px का स्पेस छोड़ा जाएगा
• बॉटम में 70px का स्पेस छोड़ा जाएगा

Example/उदहारण

div {

Padding: 25px 50px 70px ; 

}

जब  padding प्रॉपर्टीज में दो वैल्यूज हो:

• Padding: 25px 50px; 

• टॉप और बॉटम में 25px का स्पेस बनाएगा 
• राइट और लेफ्ट में 50px का स्पेस  बनाएगा 

Example/उदहारण

div {

Padding: 25px 50px; 

}

जब padding प्रॉपर्टीज में एक वैल्यूज हो

• Padding: 25px; 

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

Example/उदहारण

div {

Padding: 25px;

}

 

padding और elements width  

css padding width प्रॉपर्टीज एलिमेंट्स कंटेंट एरिया के चौड़ाई को बताता है पैडिंग मॉडल बॉक्स के बॉर्डर और मार्जिन के अंदर का भाग होता है। 

यदि किसी एलिमेंट्स के लिए इसकी विड्थ दी जाती है और यदि इसमें पैडिंग का भी उपयोग किया जाता है तो एलिमेंट्स के लिए यूज़ की गई पैडिंग को भी एलिमेंट्स के कुछ विड्थ में काउंट कर दी जाती है यह एक describable रिजल्ट होता है।   

Example 

उदहारण के लिए मान लेते है एक <div> एलिमेंट है और इसकी width 300px है लेकिन इसकी एक्चुअल विड्थ 350 px (300px + लेफ्ट पैडिंग के 25px  + राइट पैडिंग का 25 px) होगा। 

div {

width:300px;

padding:25;

}

width 300px का उपयोग करने से पैडिंग का मात्रा से इस पर इसका कोई प्रभाव नहीं बढ़ता है आप box-sizing प्रॉपर्टी का यूज़ कर सकते है यह एलिमेंट्स की एक्चुअल साइज को बनाये रखता है यदि आप पैडिंग की वैल्यू को बढ़ाते है तो कंटेंट का जो स्पेस होगा वह घटेगा।  

Example 

div {

width:300px;

padding:25;

box-sizing: border-box;

}

इतना पढ़ने के बाद आप css padding क्या होता है इसके बारे में अच्छे से जान गए होंगे इसी तरह की अच्छी अच्छी जानकारी पाने के लिए इस ब्लॉग से हमेशा जुड़े रहे।