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

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

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

सिंटैक्स

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

object.style.marginRight

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

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

आउटपुट

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

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

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

// एक मान: सभी तरफ
margin: 10px;

// दो मान: ऊपर/नीचे, बाएं/दाएं
margin: 10px 20px;

// तीन मान: ऊपर, बाएं/दाएं, नीचे
margin: 10px 20px 30px;

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

// ऑटो मार्जिन (क्षैतिज केंद्रिंग के लिए सामान्य)
margin: 0 auto;

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

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

नोट्स

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