रिस्पॉन्सिव डिज़ाइन में स्पेसिंग और पैडिंग कैसे प्रबंधित करें

Risponsiva Diza Ina Mem Spesinga Aura Paidinga Kaise Prabandhita Karem



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

यह व्यावहारिक मार्गदर्शिका प्रतिक्रियाशील डिज़ाइनों में रिक्ति और पैडिंग को प्रबंधित करने की विधि का वर्णन करेगी।

रिस्पॉन्सिव डिज़ाइन में स्पेसिंग और पैडिंग कैसे प्रबंधित करें?

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







चरण 1: एक HTML संरचना बनाएं



सबसे पहले, एक HTML संरचना और उसके अंदर कुछ टेक्स्ट का उपयोग करके बनाएं

और
टैग:



< शरीर >
< एच 2 > उत्तरदायी सीएसएस पैडिंग और रिक्ति < / एच 2 >
< डिव > इस CSS तत्व में 80px की पैडिंग और 40px की रिक्ति है। < / डिव >
< / शरीर >

चरण 2: सीएसएस लागू करें





अब, आइए CSS लागू करें

टैग। सबसे पहले, 'सेट करें गद्दी 'संपत्ति का मूल्य' 80px 'तत्व के चारों ओर जगह बनाने के लिए। इसके बाद, 'सेट करें अंतर 'संपत्ति का मूल्य' 40px ” और सीमा के बाहर तत्वों के आसपास जगह बनाएं। अंत में, 'का उपयोग करें सीमा 'संपत्ति और बॉर्डर बनाने के लिए बॉर्डर और रंग निर्दिष्ट करें:

डिव {
गद्दी : 80px ;
अंतर : 40px ;
सीमा : 1px ठोस हरा ;
}



उपरोक्त आउटपुट पुष्टि करता है कि रिक्ति और पैडिंग लागू की गई है।

आइए ब्राउज़र विंडो को अनुबंधित करके जांचें कि यह उत्तरदायी है या नहीं:

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

निष्कर्ष

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