CSS
मार्जिन

वाक्य - विन्यास

• मार्जिन: <ऊपर और दाएं और नीचे और बाएं> ;
• मार्जिन: <शीर्ष> , <बाएँ और दाएँ> , <नीचे> ;
• मार्जिन: <ऊपर और नीचे> , <बाएं और दाएं> ;
• मार्जिन: <शीर्ष> , <सही> , <निचला> , <बाएं> ;
• मार्जिन-टॉप: <टॉप> ;
• मार्जिन-राइट: <राइट> ;
• मार्जिन-तल: <निचला> ;
• मार्जिन-वाम: <बाएं> ;

पैरामीटर

टिप्पणियों

एक दिए गए पक्ष पर मार्जिन लागू करें

दिशा-विशिष्ट गुण

सीएसएस आपको मार्जिन लागू करने के लिए दिए गए पक्ष को निर्दिष्ट करने की अनुमति देता है। इस उद्देश्य के लिए प्रदान की गई चार संपत्तियां हैं:

• margin-left
• margin-right
• margin-top
• margin-bottom

निम्न कोड चयनित div के बाईं ओर 30 पिक्सेल का मार्जिन लागू करेगा। परिणाम देख

एचटीएमएल

<div id="myDiv"></div>

सीएसएस

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

आशुलिपि संपत्ति का उपयोग कर दिशा निर्दिष्ट करना

चयनित तत्वों के प्रत्येक पक्ष में भिन्न चौड़ाई निर्दिष्ट करने के लिए मानक margin संपत्ति का विस्तार किया जा सकता है। ऐसा करने के लिए वाक्य रचना इस प्रकार है:

margin: <top> <right> <bottom> <left>;

निम्न उदाहरण div के शीर्ष पर एक शून्य-चौड़ाई मार्जिन, दाईं ओर 10px मार्जिन, बाईं ओर 50px मार्जिन और बाईं ओर 100px मार्जिन लागू होता है। परिणाम देख

एचटीएमएल

<div id="myDiv"></div>

सीएसएस

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

मार्जिन ढहना

जब दो मार्जिन एक-दूसरे को लंबवत स्पर्श कर रहे होते हैं, तो वे ढह जाते हैं। जब दो मार्जिन क्षैतिज रूप से छूते हैं, तो वे ढहते नहीं हैं।

आसन्न ऊर्ध्वाधर मार्जिन का उदाहरण:

निम्नलिखित शैलियों और मार्कअप पर विचार करें:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

वे 10px अलग होंगे क्योंकि ऊर्ध्वाधर मार्जिन एक और दूसरे पर गिर जाते हैं। (रिक्ति दो मार्जिन का योग नहीं होगी।)

आसन्न क्षैतिज मार्जिन का उदाहरण:

निम्नलिखित शैलियों और मार्कअप पर विचार करें:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

वे 20px अलग होंगे क्योंकि क्षैतिज मार्जिन एक और दूसरे पर नहीं गिरते हैं। (रिक्ति दो मार्जिन का योग होगा।)

विभिन्न आकारों के साथ ओवरलैपिंग

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

इन तत्वों को 15px अलग से लंबवत फैलाया जाएगा। मार्जिन जितना हो सके ओवरलैप करता है, लेकिन बड़ा मार्जिन तत्वों के बीच अंतर को निर्धारित करेगा।

ओवरलैपिंग मार्जिन गैचा

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

दोनों ग्रंथों के बीच अंतर क्या होगा? (जवाब देखने के लिए मँडरा)

रिक्ति 25px होगी। चूंकि सभी चार मार्जिन एक-दूसरे को छू रहे हैं, इसलिए वे ढह जाएंगे, इस प्रकार चार के सबसे बड़े मार्जिन का उपयोग करेंगे।

अब, अगर हम ऊपर के मार्कअप में कुछ सीमाओं को जोड़ते हैं तो क्या होगा।

div{
    border: 1px solid red;
}

दो ग्रंथों के बीच अंतर क्या होगा? (जवाब देखने के लिए मँडरा)

रिक्ति होगी 59px! अब केवल .net-top और .net-bottom के मार्जिन एक दूसरे को स्पर्श करते हैं, और केवल गिरे हुए मार्जिन हैं। शेष मार्जिन को सीमाओं द्वारा अलग किया जाता है। तो हमारे पास 1px + 10px + 1px + है 15px + 20px + 1px + 25px + 1px। (1px की सीमाएँ हैं ...)

माता-पिता और बच्चे के तत्वों के बीच अंतर को कम करना:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

सीएसएस

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

उपरोक्त उदाहरण में, केवल सबसे बड़ा मार्जिन लागू होता है। आप उम्मीद कर सकते हैं कि पैराग्राफ h1 से 60px स्थित होगा (क्योंकि div तत्व में 40px का मार्जिन-टॉप है और p में 20px मार्जिन-टॉप है)। ऐसा नहीं होता है क्योंकि मार्जिन एक मार्जिन बनाने के लिए एक साथ गिरते हैं।

मार्जिन का उपयोग करते हुए एक पृष्ठ पर क्षैतिज रूप से केंद्र तत्व

जब तक तत्व एक ब्लॉक है , और इसका स्पष्ट रूप से सेट चौड़ाई मान है , मार्जिन का उपयोग किसी पृष्ठ पर क्षैतिज रूप से ब्लॉक तत्वों को करने के लिए किया जा सकता है।

हम एक चौड़ाई मान जोड़ते हैं जो खिड़की की चौड़ाई और मार्जिन की ऑटो संपत्ति से कम है और फिर शेष स्थान को बाईं और दाईं ओर वितरित करता है:

#myDiv {
 width:80%;
 margin:0 auto;
}

ऊपर दिए गए उदाहरण में हम शॉर्टहैंड margin डिक्लेरेशन का उपयोग करते हुए पहले 0 से टॉप और बॉटम मार्जिन वैल्यू सेट करते हैं (हालाँकि यह कोई भी वैल्यू हो सकती है) और फिर हम auto का इस्तेमाल करते हैं ताकि ब्राउजर को लेफ्ट और राइट मार्जिन वैल्यू को अपने आप स्पेस आवंटित हो सके।

ऊपर दिए गए उदाहरण में, #myDiv तत्व 80% चौड़ाई पर सेट है, जो 20% बचे का उपयोग करता है। ब्राउज़र इस मान को शेष पक्षों में वितरित करता है:

(100% - 80%) / 2 = 10%

मार्जिन संपत्ति सरलीकरण

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

एक और निर्वासन:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

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

मार्जिन कुछ सीएसएस गुणों में से एक है जिसे नकारात्मक मूल्यों पर सेट किया जा सकता है। यह संपत्ति पूर्ण स्थिति के बिना तत्वों को ओवरलैप करने के लिए इस्तेमाल की जा सकती है।

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

उदाहरण 1:

यह मान लेना स्पष्ट है कि margin-left और margin-right के मार्जिन का प्रतिशत मान इसके मूल तत्व के सापेक्ष होगा।

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

लेकिन ऐसा नहीं है, जब margin-top और margin-bottom । ये दोनों गुण, प्रतिशत में, मूल कंटेनर की ऊँचाई के सापेक्ष नहीं बल्कि मूल कंटेनर की चौड़ाई के सापेक्ष हैं।

इसलिए,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}