CSS padding प्रॉपर्टी का उपयोग करना सीखें।
CSS padding प्रॉपर्टी का उपयोग HTML एलिमेंट्स के अंदर उसके कंटेंट और बॉर्डर के बीच स्पेस की मात्रा को नियंत्रित करने के लिए किया जाता है।
padding को अक्सर CSS margin प्रॉपर्टी के साथ भ्रमित किया जाता है, जो एलिमेंट के बॉर्डर के बाहर स्पेस जोड़ता है (वही जो padding करता है उसके विपरीत)।
CSS पैडिंग मूल बातें
यहां एक बटन एलिमेंट है जिसमें टेक्स्ट लेबल (इसका कंटेंट) है:
<button>Button</button>आइए बटन को 24px का पैडिंग मान दें:
button { padding: 24px; }परिणाम:
यदि आप पैडिंग मान को 0 में बदलते हैं तो आपको यह मिलता है:
CSS में पांच अलग-अलग पैडिंग प्रॉपर्टीज़ हैं:
padding-toppadding-rightpadding-bottompadding-leftpadding(जिसे हमने अभी उपयोग किया)
पहली चार पैडिंग प्रॉपर्टीज़ (-top, -right, -bottom, -left) व्यक्तिगत, एकल-दिशा प्रॉपर्टीज़ हैं जो केवल एक तरफ पैडिंग जोड़ सकती हैं।
अंतिम वाला, padding, एक तथाकथित शॉर्टहैंड प्रॉपर्टी है, और यह पांच पैडिंग प्रॉपर्टीज़ में सबसे लचीली और सबसे अधिक उपयोग की जाने वाली है।
आइए padding प्रॉपर्टी का थोड़ा और अन्वेषण करें।
पैडिंग शॉर्टहैंड का उपयोग कैसे करें
शॉर्टहैंड padding प्रॉपर्टी (एकमात्र जिसे हमने अब तक उपयोग किया है) एक ही समय में कई पैडिंग मान जोड़ सकती है (एक, दो, तीन, या चार मान)।
आइए कुछ उदाहरण देखें।
एक मान वाला पैडिंग शॉर्टहैंड
पहले के 24px पैडिंग बटन उदाहरण में, आप अपने CSS में यह कर सकते थे:
button { padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; }लेकिन यह समय की बर्बादी है जब आप एक मान वाले पैडिंग शॉर्टहैंड का उपयोग करके एक ही बार में चारों तरफ टारगेट कर सकते हैं:
button { padding: 24px; }दो मान वाला पैडिंग शॉर्टहैंड
क्या होगा यदि आप केवल ऊपर और नीचे 16px पैडिंग चाहते हैं, लेकिन बाएं और दाएं 24px पैडिंग?
आप यह कर सकते हैं (समय लेने वाला तरीका):
button { padding-top: 16px; padding-right: 24px; padding-bottom: 16px; padding-left: 24px; }या अपने अच्छे दोस्त, दो मान वाले padding शॉर्टहैंड का उपयोग करें:
button { padding: 16px 24px; }जब आप padding प्रॉपर्टी का उपयोग दो मानों के साथ करते हैं जैसे ऊपर:
- पहला मान ऊपर और नीचे दोनों के पैडिंग को टारगेट करता है
- दूसरा मान बाएं और दाएं दोनों के पैडिंग को टारगेट करता है
परिणाम:
तीन मान वाला पैडिंग शॉर्टहैंड
जब आप padding प्रॉपर्टी का उपयोग तीन मानों के साथ करते हैं, जैसे:
button { padding: 12px 24px 8px; }- पहला मान टॉप पैडिंग है
- दूसरा मान दोनों बाएं और दाएं पैडिंग है
- तीसरा मान बॉटम पैडिंग है
परिणाम:
चार मान वाला पैडिंग शॉर्टहैंड
जब आप padding प्रॉपर्टी का उपयोग चार मानों के साथ करते हैं, जैसे:
button { padding: 12px 16px 12px 16px; }- पहला मान टॉप पैडिंग है
- दूसरा मान राइट पैडिंग है
- तीसरा मान बॉटम पैडिंग है
- चौथा मान लेफ्ट पैडिंग है
एकल-दिशा पैडिंग प्रॉपर्टीज़ का उपयोग कब करें?
शॉर्टहैंड padding प्रॉपर्टी लचीलेपन और दक्षता के मामले में एकल-दिशा पैडिंग प्रॉपर्टीज़ से कहीं बेहतर है।
तो आप उदाहरण के लिए इसका उपयोग क्यों करेंगे:
padding-left: 24px;यदि आप उसी परिणाम को प्राप्त करने के लिए नीचे दिए गए शॉर्टहैंड का उपयोग कर सकते हैं?
padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */एकल-दिशा पैडिंग प्रॉपर्टीज़ का उपयोग करने का मुख्य कारण यह है कि यदि किसी भी कारण से आप केवल एलिमेंट के एक तरफ विशिष्ट पैडिंग जोड़ना चाहते हैं, और अन्य तीन तरफ के पैडिंग मानों को उनके डिफ़ॉल्ट/वर्तमान पैडिंग मानों पर छोड़ना चाहते हैं (जो आपके सेटअप पर निर्भर करता है)।
हालांकि, मान लीजिए कि आप केवल एलिमेंट के बाएं तरफ पैडिंग चाहते हैं, लेकिन टॉप, राइट, बॉटम पर शून्य पैडिंग। एकल-दिशा पैडिंग प्रॉपर्टीज़ का उपयोग करके ऐसा करने के लिए, आपका कोड इस तरह लिखा जाना चाहिए ताकि टॉप, राइट, और बॉटम पर मौजूद किसी भी पैडिंग मान को ओवरराइड किया जा सके:
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 24pxअब उपरोक्त कुछ ऐसा है जिसे शॉर्टहैंड पैडिंग प्रॉपर्टी का उपयोग करके एक लाइन में लिखा जा सकता है:
padding: 0 0 0 24px; /* top, right, bottom, left */ये डिफ़ॉल्ट/वर्तमान पैडिंग मान क्या हैं जिनके बारे में मैं बात कर रहा हूं?
मैं उन स्टाइल्स को संदर्भित कर रहा हूं जो या तो विरासत में मिली हैं:
- यूजर एजेंट स्टाइलशीट से
- CSS लाइब्रेरी या फ्रेमवर्क से
- या आपके CSS स्टाइलशीट के शीर्ष पर आपके द्वारा जोड़े गए किसी अन्य स्टाइल डिक्लेरेशन से (याद रखें, CSS कैस्केड करता है)।
यूजर एजेंट स्टाइलशीट (UAS) एक न्यूनतम CSS स्टाइलशीट है जो सभी ब्राउज़रों में अंतर्निहित होती है। यह सुनिश्चित करने के लिए है कि भले ही आप अपनी वेबसाइट पर कोई CSS न जोड़ें, फिर भी कंटेंट को एंड-यूजर के लिए पढ़ने योग्य बनाने के लिए पर्याप्त स्टाइलिंग/फॉर्मेटिंग होगी।
उदाहरण के लिए, यदि आपके बटन एलिमेंट पर वर्तमान पैडिंग ऐसा दिखता है (चाहे वह कहीं से भी आए):
button { padding-top: 16px; padding-right: 20px; padding-bottom: 20px; padding-left: 16px }और आप एक बटन क्लास बनाते हैं जो केवल पैडिंग टॉप मान को संबोधित करती है:
.button-login { padding-top: 40px; }और इसे एक बटन एलिमेंट में जोड़ते हैं:
<button class="button-login">Login</button>तब आपका लॉगिन बटन ऐसा दिखेगा:
क्योंकि फिर से, राइट, बॉटम, और लेफ्ट पैडिंग मान कहीं और से विरासत में मिले हैं।
जैसा कि आप शायद कल्पना कर सकते हैं, एकल-दिशा पैडिंग प्रॉपर्टीज़ का उपयोग भ्रम या अप्रत्याशित परिणाम पैदा कर सकता है, यह इस बात पर निर्भर करता है कि आपका विशिष्ट CSS कोडबेस कितना व्यवस्थित है।
मैं शायद ही कभी एकल-दिशा पैडिंग प्रॉपर्टीज़ का उपयोग करता हूं, क्योंकि हर नई परियोजना की शुरुआत में मैं अपने पैडिंग मानों को शून्य पर रीसेट करता हूं, और फिर अपनी परियोजना के स्पेसिंग स्केल के आधार पर अपने UI कंपोनेंट्स (HTML एलिमेंट्स) में पैडिंग मान जोड़ता हूं।
यह मेरे वर्कफ़्लो को अधिक अनुमानित बनाता है क्योंकि मुझे विभिन्न ब्राउज़रों की यूजर एजेंट स्टाइलशीट द्वारा पास की गई विभिन्न स्टाइल्स के बारे में चिंता करने की ज़रूरत नहीं है।
उपरोक्त सभी कारणों से, पैडिंग मानों को परिभाषित करने के लिए शॉर्टहैंड padding विधि का उपयोग करना अधिकांश समय अधिक व्यावहारिक है।
संदेह होने पर, पैडिंग शॉर्टहैंड का उपयोग करें।
पैडिंग शॉर्टहैंड याद रखने का तरीका
चार मान वाला शॉर्टहैंड याद रखने में सबसे आसान है क्योंकि मान घड़ी की दिशा में जोड़े जाते हैं: टॉप, राइट, बॉटम, लेफ्ट।
दो और तीन मान वाले शॉर्टहैंड कम स्पष्ट हैं:
- दो मान वाला शॉर्टहैंड:
16px 8px(टॉप-बॉटम, लेफ्ट-राइट) - तीन मान वाला शॉर्टहैंड:
8px 16px 4px(टॉप, लेफ्ट-राइट, बॉटम)
नोट: व्यवहार में, आपको शायद ही कभी तीन मान वाले शॉर्टहैंड का उपयोग करने की आवश्यकता होगी, जो मेरी राय में, इसे याद रखने लायक नहीं बनाता (अपनी मस्तिष्क क्षमता का उपयोग किसी और चीज़ के लिए करें)। यदि आवश्यक हो तो इसे देख लें।
स्वीकार्य पैडिंग लंबाई इकाइयां
padding प्रॉपर्टीज़ सभी प्रकार की लंबाई इकाइयों को स्वीकार करती हैं। सबसे आम लंबाई इकाइयां हैं, px, rem, em, %, vw, vh, inherit।
नोट: मैंने इस ट्यूटोरियल में पिक्सेल इकाइयों px का उपयोग किया है क्योंकि यह शुरुआती लोगों के लिए अधिक संबंधित इकाई प्रकार है (जो मुझे लगता है कि आप में से अधिकांश हैं)। यह विशेष रूप से सच है यदि आप इलस्ट्रेटर, स्केच, फिग्मा आदि का उपयोग करके विज़ुअल डिज़ाइन बैकग्राउंड से आते हैं।
हालांकि, पिक्सेल निरपेक्ष इकाइयां हैं जिनकी निश्चित लंबाई होती है, इसलिए वे अच्छी तरह से स्केल नहीं करतीं।
सापेक्ष इकाइयां, जैसे उपरोक्त rem, em, %, vw, vh, स्केलिंग में उत्कृष्ट हैं, लेकिन वे प्रत्येक अलग-अलग तरीकों से ऐसा करती हैं।
मैं ज्यादातर अपने पैडिंग मानों के लिए rem का उपयोग करता हूं, लेकिन यह बड़े पैमाने पर वरीयता का मामला है इस युग में जहां सभी आधुनिक ब्राउज़र सभी इकाई प्रकारों को प्रोसेस कर सकते हैं।
प्रदर्शन अनुकूलन (वैकल्पिक पढ़ना)
उन लोगों के लिए जो प्रदर्शन अनुकूलन पृष्ठभूमि से आते हैं, मुझे पता है कि आप क्या सोच रहे हैं:
"क्या पैडिंग शॉर्टहैंड का उपयोग करने के विपरीत एकल-दिशा मानों का उपयोग करने में प्रदर्शन अंतर/लागत है?"
उत्तर हां है। हालांकि, यह भविष्यवाणी करना लगभग असंभव है कि निम्नलिखित दो उदाहरणों में से कौन सा समग्र रूप से सबसे अधिक प्रदर्शनकारी है:
padding: 8px 12px 16px 20px;padding-top: 8px; padding-right: 12px; padding-bottom: 16px; padding-left: 20px;आप सोच सकते हैं कि शॉर्टहैंड स्पष्ट रूप से सबसे अधिक प्रदर्शनकारी विकल्प है, क्योंकि इसमें प्रोसेस करने के लिए कम बाइट्स (डेटा) हैं।
हालांकि, यह सब इस बात पर निर्भर करता है कि विकास और उत्पादन के बीच कोड प्रोसेसिंग (पार्सिंग, मिनिफाइंग, कंपाइलिंग) के मामले में क्या होता है और आपकी परियोजना कैसे कॉन्फ़िगर और व्यवस्थित है।
कोई भी संभावित अंतर इतना मामूली है कि इसके बारे में चिंता करने लायक नहीं है। आपको अपनी लड़ाई बुद्धिमानी से चुननी होगी, और जब प्रदर्शन की बात आती है, तो आपके पास पैडिंग प्रॉपर्टीज़ से निपटने के लिए बहुत बड़ी मछलियाँ हैं।
