CSS पैडिंग प्रॉपर्टी का उपयोग कैसे करें

जानें कि CSS पैडिंग का उपयोग कैसे करें संपत्ति।

सीएसएस padding संपत्ति का उपयोग अंदर space स्थान की मात्रा को नियंत्रित करने के लिए किया जाता है इसकी सामग्री और सीमा के बीच HTML तत्व।

padding अक्सर CSS margin के साथ भ्रमित होता है संपत्ति, जो बाहर space स्थान जोड़ती है एक तत्व की सीमा (padding के विपरीत) करता है)।

CSS पैडिंग बेसिक्स

टेक्स्ट लेबल (इसकी सामग्री) वाला एक बटन तत्व यहां दिया गया है:

<button>Button</button>

आइए बटन को 24px का पैडिंग मान दें:

button { 
    padding: 24px;
}

परिणाम:

यदि आप पैडिंग मान को 0 . में बदलते हैं आपको यह मिलता है:

सीएसएस में पांच अलग-अलग पैडिंग गुण हैं:

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (जिसे हमने अभी इस्तेमाल किया है)

पहले चार पैडिंग गुण (-टॉप, -राइट, -बॉटम, -लेफ्ट) व्यक्तिगत, एकल-दिशा गुण हैं जो केवल एक तरफ पैडिंग जोड़ सकते हैं।

आखिरी वाला, 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 */

ये डिफ़ॉल्ट/वर्तमान पैडिंग मान क्या हैं जिनके बारे में मैं बात कर रहा हूं?

मैं या तो इनहेरिट की गई शैलियों की बात कर रहा हूं:

• उपयोगकर्ता एजेंट स्टाइलशीट
• एक सीएसएस पुस्तकालय या ढांचा
• या आपकी सीएसएस स्टाइलशीट (याद रखें, सीएसएस कैस्केड) के शीर्ष पर स्वयं द्वारा जोड़ी गई कोई अन्य शैली घोषणाएं।

उपयोगकर्ता एजेंट स्टाइलशीट (UAS) एक न्यूनतम सीएसएस स्टाइलशीट है जो सभी ब्राउज़रों में अंतर्निहित है। यह सुनिश्चित करने के लिए है कि भले ही आप अपनी वेबसाइट पर स्वयं कोई सीएसएस नहीं जोड़ते हैं, फिर भी आपकी सामग्री को अंतिम-उपयोगकर्ता के लिए पठनीय बनाने के लिए पर्याप्त स्टाइल/स्वरूपण होगा।

उदाहरण के लिए, यदि आपके बटन तत्व पर वर्तमान पैडिंग इस तरह दिखती है (चाहे वह कहां से आती है):

button {
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 16px
}

और आप एक बटन वर्ग बनाते हैं जो केवल पैडिंग शीर्ष मान को संबोधित करता है:

.button-login {
    padding-top: 40px;
}

और इसे एक बटन तत्व में जोड़ें:

<button class="button-login">Login</Button>

फिर आपका लॉगिन बटन इस तरह दिखेगा:

क्योंकि फिर से, दाएँ, नीचे और बाएँ पैडिंग मान कहीं और से विरासत में मिले हैं।

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

मैं शायद ही कभी एकल दिशा पैडिंग गुणों का उपयोग करें, क्योंकि प्रत्येक नए प्रोजेक्ट की शुरुआत में मैं अपने पैडिंग मानों को शून्य पर रीसेट करता हूं, और फिर अपने प्रोजेक्ट के स्पेसिंग स्केल के आधार पर अपने 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;

आप सोच सकते हैं कि शॉर्टहैंड स्पष्ट रूप से सबसे अधिक प्रदर्शन करने वाला विकल्प है, क्योंकि इसमें प्रोसेस करने के लिए कम बाइट्स (डेटा) होते हैं।

हालांकि, यह सब इस बात पर निर्भर करता है कि कोड प्रोसेसिंग (पार्सिंग, मिनिफाइंग, कंपाइलिंग) के संदर्भ में विकास और उत्पादन के बीच क्या होता है और आपकी परियोजना को कैसे कॉन्फ़िगर और व्यवस्थित किया जाता है।

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