सीएसएस मार्जिन संपत्ति
उदाहरण
<p> तत्व के सभी चार पक्षों के लिए मार्जिन को 35 पिक्सेल पर सेट करें:
p {
margin: 35px;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति एक तत्व के margin
लिए मार्जिन सेट करती है, और निम्नलिखित गुणों के लिए एक आशुलिपि संपत्ति है:
यदि मार्जिन संपत्ति में चार मान हैं:
- मार्जिन: 10px 5px 15px 20px;
- शीर्ष मार्जिन 10px . है
- दायां हाशिया 5px . है
- निचला मार्जिन 15px . है
- बायां हाशिया 20px . है
यदि मार्जिन संपत्ति में तीन मान हैं:
- मार्जिन: 10px 5px 15px;
- शीर्ष मार्जिन 10px . है
- दाएँ और बाएँ हाशिये 5px . हैं
- निचला मार्जिन 15px . है
यदि मार्जिन संपत्ति के दो मान हैं:
- मार्जिन: 10px 5px;
- ऊपर और नीचे का मार्जिन 10px . है
- दाएँ और बाएँ हाशिये 5px . हैं
यदि मार्जिन संपत्ति का एक मान है:
- मार्जिन: 10px;
- सभी चार मार्जिन 10px . हैं
नोट: नकारात्मक मानों की अनुमति है।
डिफ़ॉल्ट मान: | 0 |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | हाँ, व्यक्तिगत गुण देखें । एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 1 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.margin="100px 50px" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
सीएसएस सिंटेक्स
margin: length|auto|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
मार्जिन पतन
तत्वों के ऊपर और नीचे के मार्जिन कभी-कभी एक ही मार्जिन में ढह जाते हैं जो दो मार्जिन के सबसे बड़े के बराबर होता है।
यह क्षैतिज (बाएं और दाएं) हाशिये पर नहीं होता है! केवल लंबवत (ऊपर और नीचे) मार्जिन!
निम्नलिखित उदाहरण देखें:
उदाहरण
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
ऊपर के उदाहरण में, <p class="a"> तत्व का ऊपरी और निचला मार्जिन 30px है। <p class="b"> तत्व का ऊपरी और निचला मार्जिन 20px है।
इसका मतलब है कि <p class="a"> और <p class="b"> के बीच का वर्टिकल मार्जिन 50px (30px + 20px) होना चाहिए। लेकिन मार्जिन में गिरावट के कारण, वास्तविक मार्जिन 30px हो जाता है!
और ज्यादा उदाहरण
उदाहरण
<p> एलिमेंट के लिए मार्जिन को ऊपर और नीचे के लिए 35 पिक्सल और दाएं और बाएं के लिए 70 पिक्सल पर सेट करें:
p {
margin: 35px 70px;
}
उदाहरण
<p> एलिमेंट के लिए मार्जिन को ऊपर के लिए 35 पिक्सल, दाएं और बाएं के लिए 70 पिक्सल और नीचे के लिए 50 पिक्सल पर सेट करें:
p {
margin: 35px 70px 50px;
}
उदाहरण
<p> एलिमेंट के लिए मार्जिन को ऊपर के लिए 35 पिक्सल, दाएं के लिए 70 पिक्सल, नीचे के लिए 50 पिक्सल और बाएं के लिए 90 पिक्सल पर सेट करें:
p {
margin: 35px 70px 50px 90px;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस मार्जिन
सीएसएस ट्यूटोरियल: सीएसएस बॉक्स मॉडल
एचटीएमएल डोम संदर्भ: मार्जिन संपत्ति