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

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

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

सिंटैक्स

ऊपरी मार्जिन प्राप्त करना

object.style.marginTop

ऊपरी मार्जिन सेट करना

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

आउटपुट

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

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

marginTop के विशेष व्यवहार

• मार्जिन कॉलेप्सिंग: आसन्न ऊर्ध्वाधर मार्जिन्स (margin-top/margin-bottom) एक बड़ी मार्जिन में कॉलेप्स हो जाती हैं (अधिकतम मान)। यह ब्लॉक तत्वों के लिए डिफ़ॉल्ट व्यवहार है।
• कॉलेप्सिंग रोकना: पैरेंट पर overflow: auto/hidden, display: flow-root, padding, या border जोड़ें।
• फ्लेक्स/ग्रिड आइटम्स: फ्लेक्स/ग्रिड कंटेनर में मार्जिन कॉलेप्स नहीं होती।
• margin-top: auto फ्लेक्स कॉलम में आइटम को नीचे धकेलता है।

नोट्स

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