टेलविंड में क्षैतिज और लंबवत पैडिंग कैसे जोड़ें?

Telavinda Mem Ksaitija Aura Lambavata Paidinga Kaise Jorem



टेलविंड सीएसएस में, गद्दी विशिष्ट तत्व की सामग्री और उसकी सीमा के बीच का स्थान है। क्षैतिज गद्दी जबकि, तत्व के बाएँ और दाएँ तरफ का स्थान है ऊर्ध्वाधर गद्दी किसी तत्व के ऊपर और नीचे का स्थान है। टेलविंड वांछित तत्वों में क्षैतिज या ऊर्ध्वाधर पैडिंग जोड़ने के लिए विभिन्न उपयोगिता वर्ग प्रदान करता है।

यह लेख स्पष्ट करेगा:







टेलविंड में क्षैतिज पैडिंग कैसे जोड़ें?

टेलविंड में किसी तत्व में क्षैतिज पैडिंग जोड़ने के लिए, HTML प्रोग्राम में वांछित तत्व के साथ 'px-<मान>' वर्ग का उपयोग किया जाता है। उपयोगकर्ता पैडिंग के आकार के लिए अलग-अलग मान निर्दिष्ट कर सकते हैं। यह वर्ग एक्स-अक्ष के साथ यानी तत्व के बाएँ और दाएँ दोनों तरफ पैडिंग जोड़ता है।



वाक्य - विन्यास



< तत्व कक्षा = 'पीएक्स-0...' > ... तत्व >


यहां 'पीएक्स' 'एक्स-अक्ष' या 'क्षैतिज पैडिंग' का प्रतिनिधित्व करता है।





उदाहरण: HTML तत्व पर क्षैतिज पैडिंग लागू करना

इस उदाहरण में, हम 'का उपयोग करेंगे px-20 'उपयोगिता वर्ग' के साथ

इसमें क्षैतिज पैडिंग जोड़ने के लिए तत्व:



< शरीर >

< डिव कक्षा = 'बीजी-गुलाबी-600 पीएक्स-20 डब्ल्यू-मैक्स' >
गद्दी में टेलविंड सीएसएस
डिव >

शरीर >


उत्पादन


उपरोक्त आउटपुट कंटेनर के बाईं और दाईं ओर पैडिंग दिखाता है। यह इंगित करता है कि क्षैतिज पैडिंग को कंटेनर तत्व पर सफलतापूर्वक लागू किया गया है।

टेलविंड में वर्टिकल पैडिंग कैसे जोड़ें?

टेलविंड में किसी तत्व में लंबवत पैडिंग जोड़ने के लिए, 'का उपयोग करें' py-<मूल्य> HTML प्रोग्राम में विशिष्ट तत्व के साथ उपयोगिता वर्ग। यह वर्ग y-अक्ष के साथ यानी तत्व के ऊपर और नीचे दोनों तरफ पैडिंग जोड़ता है।

वाक्य - विन्यास

< तत्व कक्षा = 'पाइ-0...' > ... तत्व >


यहाँ 'py' 'y-अक्ष' या 'ऊर्ध्वाधर पैडिंग' का प्रतिनिधित्व करता है।

उदाहरण: HTML तत्व पर वर्टिकल पैडिंग लागू करना

इस उदाहरण में, हम 'का उपयोग करेंगे py-20 'उपयोगिता वर्ग' के साथ

इसमें लंबवत पैडिंग जोड़ने के लिए तत्व:

< शरीर >

< डिव कक्षा = 'बीजी-गुलाबी-600 पीवाई-20 डब्ल्यू-मैक्स' >
गद्दी में टेलविंड सीएसएस
डिव >

शरीर >


उत्पादन


उपरोक्त आउटपुट कंटेनर के ऊपर और नीचे की तरफ पैडिंग दिखाता है। यह इंगित करता है कि ऊर्ध्वाधर पैडिंग को कंटेनर तत्व पर प्रभावी ढंग से लागू किया गया है।

निष्कर्ष

टेलविंड में क्षैतिज और ऊर्ध्वाधर पैडिंग जोड़ने के लिए, ' px-<मूल्य> ' और ' py-<मूल्य> उपयोगिता वर्ग का उपयोग क्रमशः HTML प्रोग्राम में वांछित तत्वों के साथ किया जाता है। उपयोगकर्ता किसी तत्व के बाएँ और दाएँ या ऊपर और नीचे पैडिंग लागू करने के लिए अलग-अलग मान निर्दिष्ट कर सकते हैं। इस लेख में टेलविंड में क्षैतिज और ऊर्ध्वाधर पैडिंग लगाने की पूरी विधि का वर्णन किया गया है।