CSS Margins Property का उपयोग एलेमेन्ट के चारों ओर, किसी भी निर्धारित बॉर्डर के बाहर, जगह (Space) बनाने के लिए किया जाता है।
मार्जिन किसी Element की बॉर्डर और आसपास के Elements के बीच की दूरी निर्धारित करते हैं।
CSS के साथ, आपके पास मार्जिन पर पूरा नियंत्रण होता है। CSS में किसी Element के प्रत्येक साइड (Top, Right, Bottom, and Left) के लिए मार्जिन सेट करने के Property होते हैं, और एक ही Declaration में सभी Margin Property को सेट करने के लिए Shorthand Property होती है।
Margin – Individual Sides
CSS में किसी Element की प्रत्येक Side के लिए मार्जिन निर्दिष्ट करने के निम्न गुण होते हैं:
margin-top– एलेमेन्ट के टॉप साइड मार्जिन सेट करने के लिएmargin-right– एलेमेन्ट के राइट साइड मे मार्जिन सेट करने के लिएmargin-bottom– एलेमेन्ट के नीचे साइड मार्जिन सेट करने के लिएmargin-left– एलेमेन्ट के लेफ्ट साइड मे मार्जिन सेट करने के लिए
Margin Property Values
सभी मार्जिन गुणों में निम्नलिखित मान हो सकते हैं:
- auto- ब्राउज़र मार्जिन की गणना करता है
- length – px, pt, cm, आदि में मार्जिन निर्दिष्ट करता है
- percent – % मे मार्जिन निर्दिष्ट करता है
- inherit – निर्दिष्ट करता है कि मार्जिन को मूल तत्व से इनहेरिट किया जाना चाहिए
नोट – मार्जिन प्रॉपर्टी में निगेटिव वैल्यू सेट करने की भी अनुमति है।
Example
Set different margins for all four sides of a <p> element:
CSS Code
p {
margin-top: 30px;
margin-bottom: 50px;
margin-right: 30px;
margin-left: 80px;
}
HTML Code
<body>
<p>This is example of different side margins...</p>
</body>
उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा-
This is example of different side margins. top margin 30px, right margin 50px, bottom margin 30px and left margin 80px
Margin – Shorthand Property
कोड को छोटा करने के लिए, सभी मार्जिन प्रॉपर्टी को एक ही Declaration में निर्दिष्ट करना संभव है, जिसमे प्रत्येक प्रॉपर्टी का मतलब निम्न तरह है।
Example
Use the margin shorthand property with four values:
p{
margin: 30px 40px 60px 50px;
}
उपरोक्त declaration मे सभी वैल्यू का मतलब इस प्रकार है-
- top margin is 30px
- right margin is 40px
- bottom margin is 60px
- left margin is 50px
यदि मार्जिन प्रॉपर्टी की तीन वैल्यू निर्दिष्ट की जाती हैं, तो इसका मतलब इस प्रकार है।
margin: 30px 40px 50px;
- top margin is 30px
- right and left margins are 40px
- bottom margin is 50px
यदि मार्जिन प्रॉपर्टी की दो वैल्यू निर्दिष्ट की जाती हैं तो-
margin: 30px 50px;
- top and bottom margin is 30px
- right and left margin is 50px
यदि मार्जिन प्रॉपर्टी की केवल एक वैल्यू निर्दिष्ट की जाती हैं तो-
margin: 30px;
- all sides margin set to 30px
This is example of equal side margins. top margin 30px, right margin 30px, bottom margin 30px and left margin 30px
Margin Auto Value
किसी Element को उसके कंटेनर में क्षैतिज रूप से केंद्रित (Horizontally Center) करने के लिए मार्जिन प्रॉपर्टी को auto पर सेट कर सकते हैं। तब Element स्वतः निर्दिष्ट चौड़ाई ले लेगा, और शेष स्थान बाएँ और दाएँ मार्जिन के बीच समान रूप से विभाजित हो जाएगा।
Example
Use margin: auto:
CSS Code
div {
width: 350px;
margin: auto;
border: 1px solid black;
background-color: gray;
}
HTML Code
<body>
<div></div>
</body>
उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा-
The Inherit Value
मार्जिन प्रॉपर्टी को Inherit सेट करने से मार्जिन पैरेंट एलिमेंट से Inherit हो जाता है। निम्न उदाहरण <p> एलिमेंट की मार्जिन को पैरेंट एलिमेंट <div> की मार्जिन के अनुसार Inherit कर दिया जाएगा।
Example
Use of the inherit value.
CSS Code
div {
border: 1px solid black;
margin: 20px;
}
p.div {
margin: inherit;
}
HTML Code
<body>
<div><p>This paragraph element inherited by parent div element.</p></div>
</body>
उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा-
This paragraph element inherited by parent div element.