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

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

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

सिंटैक्स

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

object.style.margin

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

object.style.margin = "value"

मान (शॉर्टहैंड सिंटैक्स)

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

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

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

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

/* ऑटो: क्षैतिज केंद्रिंग */
margin: 0 auto;

उदाहरण

यह उदाहरण एक पैराग्राफ पर मार्जिन सेट करता है:

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

आउटपुट

"मार्जिन जोड़ें" बटन पर क्लिक करने पर, पैराग्राफ को ऊपर/नीचे 20px और बाएं/दाएं 30px मार्जिन मिलती है।

व्यक्तिगत मार्जिन प्रॉपर्टीज़

margin शॉर्थैंड बनाम व्यक्तिगत प्रॉपर्टीज़

• शॉर्टहैंड (margin): एक बार में सभी तरफ सेट करता है; व्यक्तिगत प्रॉपर्टीज़ को ओवरराइड करता है। पढ़ने पर विस्तारित रूप लौटाता है।
• व्यक्तिगत (marginTop, आदि): एक तरफ सेट करता है; अन्य को अपरिवर्तित छोड़ता है।

विशेष मान: auto

// क्षैतिज केंद्रिंग (ब्लॉक तत्वों के लिए जिनकी चौड़ाई निर्दिष्ट है)
element.style.margin = "0 auto";

// फ्लेक्स/ग्रिड में: margin: auto सभी दिशाओं में केंद्रित करता है
element.style.margin = "auto";

नोट्स

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