DOM की paddingTop प्रॉपर्टी का उपयोग HTML में किसी एलिमेंट के टॉप पैडिंग को सेट करने के लिए किया जाता है। याद रखें, यह एलिमेंट के बॉर्डर के भीतर स्पेस डालता है। इसका उपयोग टॉप पैडिंग को प्राप्त करने के लिए भी किया जाता है। डिफ़ॉल्ट मान 0 है।
सिंटैक्स
निम्न सिंटैक्स है:
- टॉप पैडिंग प्राप्त करने का सिंटैक्स
object.style.paddingTop
- टॉप पैडिंग सेट करने का सिंटैक्स
object.style.paddingTop = "%|length|initial|inherit"
यहां, % टॉप पैडिंग है, length यूनिट्स में लंबाई के रूप में टॉप पैडिंग है, initial प्रॉपर्टी को डिफ़ॉल्ट मान पर सेट करने के लिए उपयोग किया जाता है और inherit का उपयोग पैरेंट एलिमेंट से प्रॉपर्टी को इनहेरिट करने के लिए किया जाता है।
उदाहरण
आइए अब paddingTop प्रॉपर्टी को लागू करने का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #sample { border: 2px dashed #ded575; } </style> </head> <body> <div id="sample">डेमो टेक्स्ट!</div> <br> <button type="button" onclick="demo()">अपडेट</button> <script> function demo() { document.getElementById("sample").style.paddingTop = "80px"; } </script> </body> </html>
आउटपुट
यह निम्न आउटपुट देगा:
ऊपर दिए गए अपडेट बटन पर क्लिक करने पर, निम्न दिखाई देगा। हमने अब पैडिंग-टॉप प्रॉपर्टी का उपयोग करके टॉप पैडिंग आसानी से सेट कर दी है:
