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

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

DOM style.marginBottom प्रॉपर्टी किसी तत्व के निचले मार्जिन (बाहरी स्थान) को प्राप्त या सेट करती है। यह CSS margin-bottom प्रॉपर्टी के अनुरूप है।

सिंटैक्स

निचला मार्जिन प्राप्त करना

object.style.marginBottom

निचला मार्जिन सेट करना

object.style.marginBottom = "value"

मान

• लंबाई इकाइयाँ: px, em, rem, %, auto, आदि।
• 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 marginBottom प्रॉपर्टी उदाहरण</h1>
<p>नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ। नमस्ते! मैं कुछ रैंडम टेक्स्ट वाला एक बहुत बढ़िया पैराग्राफ हूँ।</p>
<button onclick="addMargin()" class="btn">मार्जिन जोड़ें</button>
<script>
  function addMargin() {
    document.querySelector('p').style.marginBottom = "50px";
  }
</script>
</body>
</html>

आउटपुट

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

सभी मार्जिन प्रॉपर्टीज़

marginBottom के विशेष उपयोग

• तत्वों के बीच स्पेसिंग: लगातार ब्लॉक तत्वों (पैराग्राफ, डिव, सेक्शन) के बीच ऊर्ध्वाधर लय बनाने के लिए।
• स्टिकी फुटर: कंटेंट पर margin-bottom का उपयोग करके फुटर के लिए स्थान आरक्षित करना।
• फॉर्म फील्ड स्पेसिंग: इनपुट फ़ील्ड्स के बीच सुसंगत अंतराल।
• कॉलेप्सिंग: अगले तत्व के margin-top के साथ कॉलेप्स होती है (ऊपर देखें)।

नोट्स

• रिटर्न किया गया मान स्ट्रिंग है जिसमें इकाई शामिल होती है (उदाहरण: "50px")।
• यदि CSS में सेट नहीं किया गया है, तो खाली स्ट्रिंग "" लौटाता है (गणना मान के लिए getComputedStyle() का उपयोग करें)।
• मार्जिन तत्व के बाहर स्थान जोड़ती है; पृष्ठभूमि/बॉर्डर को प्रभावित नहीं करती।
• प्रतिशत मान पैरेंट की चौड़ाई के सापेक्ष होते हैं (ऊंचाई के नहीं)।