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

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

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

सिंटैक्स

बाएं मार्जिन प्राप्त करना

object.style.marginLeft

बाएं मार्जिन सेट करना

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

आउटपुट

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

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

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

• इंडेंटेशन: नेस्टेड सूचियों, ट्री व्यू, ब्लॉकक्वोट्स के लिए बाएं मार्जिन।
• फ्लेक्स/ग्रिड: margin-left: auto फ्लेक्स आइटम को दाएं धकेलता है (स्पेस-बिटवीन व्यवहार)।
• RTL लेआउट: RTL में, margin-left तत्व के दाएं तरफ स्थान जोड़ता है (लॉजिकल प्रॉपर्टीज़ margin-inline-start का उपयोग करें)।
• नेगेटिव मार्जिन: तत्व को उसके सामान्य स्थान से बाएं खींचने के लिए (ओवरलैपिंग लेआउट)।

नोट्स

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