HTML DOM Style paddingBottom प्रॉपर्टी

style.paddingBottom प्रॉपर्टी क्या है?

HTML DOM style.paddingBottom प्रॉपर्टी किसी तत्व के नीचे के पैडिंग (आंतरिक स्थान) को प्राप्त या सेट करती है। यह CSS padding-bottom प्रॉपर्टी के अनुरूप है।

सिंटैक्स

नीचे का पैडिंग प्राप्त करना

object.style.paddingBottom

नीचे का पैडिंग सेट करना

object.style.paddingBottom = "value"

मान

लंबाई इकाइयाँ: px, em, rem, %, vh, vw, आदि।
inherit, initial, unset।

उदाहरण

यह उदाहरण एक पैराग्राफ पर नीचे का पैडिंग जोड़ता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
</head>
<body>
<h1>DOM Style paddingBottom प्रॉपर्टी उदाहरण</h1>
<p>नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ।</p>
<button onclick="addPadding()" class="btn">पैडिंग जोड़ें</button>
<script>
  function addPadding() {
    document.querySelector('p').style.paddingBottom = "30px";
  }
</script>
</body>
</html>

आउटपुट

"पैडिंग जोड़ें" बटन पर क्लिक करने पर, पैराग्राफ को 30px नीचे पैडिंग मिलती है, जिससे टेक्स्ट और नीचे के बॉर्डर के बीच स्थान बन जाता है।

सभी पैडिंग प्रॉपर्टीज़

JS प्रॉपर्टी	CSS प्रॉपर्टी	दिशा
`paddingTop`	`padding-top`	ऊपर
`paddingRight`	`padding-right`	दाएं
`paddingBottom`	`padding-bottom`	नीचे
`paddingLeft`	`padding-left`	बाएं
`padding`	`padding`	शॉर्टहैंड (सभी)

शॉर्टहैंड सिंटैक्स (padding)

// एक मान: सभी तरफ
element.style.padding = "10px";

// दो मान: ऊपर/नीचे, बाएं/दाएं
element.style.padding = "10px 20px";

// तीन मान: ऊपर, बाएं/दाएं, नीचे
element.style.padding = "10px 20px 30px";

// चार मान: ऊपर, दाएं, नीचे, बाएं (घड़ी की दिशा में)
element.style.padding = "10px 20px 30px 40px";

नोट्स

रिटर्न किया गया मान स्ट्रिंग है जिसमें इकाई शामिल होती है (उदाहरण: "30px")।
यदि CSS में सेट नहीं किया गया है, तो खाली स्ट्रिंग "" लौटाता है (गणना मान के लिए getComputedStyle() का उपयोग करें)।
पैडिंग तत्व के अंदर स्थान जोड़ती है; तत्व की चौड़ाई/ऊंचाई बढ़ाती है (जब तक कि box-sizing: border-box न हो)।