सीएसएस माउंट
- पिछला पृष्ठ सीएसएस कोन बॉर्डर
- अगला पृष्ठ सीएसएस माउंट मर्ज
सीएसएस माउंट
CSS मार्गिन गुण किसी निर्दिष्ट किए गए किनारे के बाहर, एलीमेंट के चारों ओर अंतराल बनाता है।
CSS के द्वारा, आप एलीमेंट के प्रत्येक ओर (ऊपर, दायाँ, नीचे और बाईं) के बाह्य किनारा पूरी तरह से नियंत्रित कर सकते हैं।
मार्गिन - अलग-अलग ओर
CSS एलीमेंट के प्रत्येक ओर के लिए बाह्य किनारा को निर्दिष्ट करने के लिए गुण है:
मार्गिन-ऊपरमार्गिन-दायाँमार्गिन-नीचेमार्गिन-बाईं
सभी बाह्य किनारा गुण निम्नलिखित मूल्यों को सेट कर सकते हैं:
- auto - ब्राउज़र ने मार्गिन की गणना करेगा
- लंबाई - px, pt, cm आदि इकाइयों में मार्गिन निर्दिष्ट करें
- % - वर्तमान एलीमेंट के विस्तार के प्रतिशत में मार्गिन निर्दिष्ट करें
- उदात्त - पैरंट एलीमेंट से मार्गिन को उदात्त करें
सूचना:नकारात्मक मूल्य अनुमति है।
इंस्टेंस
<p> एलीमेंट के सभी चार ओर के लिए अलग-अलग मार्गिन सेट करें:
p {
मार्गिन-ऊपर: 100 पिक्सेल;
मार्गिन-नीचे: 100 पिक्सेल;
मार्गिन-दायाँ: 150 पिक्सेल;
मार्गिन-बाईं: 80 पिक्सेल;
}
मार्गिन - लघुवचना गुण
कोड को कम करने के लिए, सभी बाह्य किनारा गुणों को एक ही गुण में निर्दिष्ट किया जा सकता है。
मार्गिन गुण निम्नलिखित बाह्य किनारा गुणों का लघुवचना है:
मार्गिन-ऊपरमार्गिन-दायाँमार्गिन-नीचेमार्गिन-बाईं
मार्गिन-लघुवचना गुण
यदि मार्गिन कार्यकारी सिद्धांत यह है:
- चार वैल्यू को सेट करने वाले मार्गिन लघुवचना गुण:
- गुण तीन वैल्यू सेट करता है:
- गुण चार वैल्यू है:
- ऊपर का मार्गिन 25 पिक्सेल है
- दायाँ का मार्गिन 50 पिक्सेल है
इंस्टेंस
बाईं का मार्गिन 100 पिक्सेल है
p {
चार वैल्यू को सेट करने वाले मार्गिन लघुवचना गुण:
}
यदि मार्गिन मार्गिन: 25 पिक्सेल 50 पिक्सेल 75 पिक्सेल;
- तीन वैल्यू को सेट करने वाले मार्गिन लघुवचना गुण:
- गुण तीन वैल्यू सेट करता है:
- दायाँ और बाईं बाह्य किनारा 50 पिक्सेल हैं
- ऊपर का मार्गिन 25 पिक्सेल है
इंस्टेंस
नीचे का मार्गिन 75 पिक्सेल है
p {
तीन वैल्यू को सेट करने वाले मार्गिन लघुवचना गुण:
}
यदि मार्गिन गुण दो वैल्यू सेट करता है:
- मार्गिन: 25 पिक्सेल 50 पिक्सेल;
- ऊपर और नीचे बाह्य किनारा 25 पिक्सेल हैं
- दायाँ और बाईं बाह्य किनारा 50 पिक्सेल हैं
इंस्टेंस
दो वैल्यू को सेट करने वाले मार्गिन लघुवचना गुण:
p {
मार्गिन: 25 पिक्सेल 50 पिक्सेल;
}
यदि मार्गिन गुण एक वैल्यू सेट करता है:
- मार्गिन: 25 पिक्सेल;
- सभी चार बाह्य किनारा 25 पिक्सेल हैं
इंस्टेंस
एक मार्गिन वैल्यू को सेट करने के लिए मार्गिन लघुवचना गुण:
p {
मार्गिन: 25 पिक्सेल;
}
auto वैल्यू
आप मार्गिन एट्रिब्यूट को autoसे इस तरह कि एलेमेंट अपने कंटेनर में अनुकूल होगा。
तो, इस एलेमेंट निर्दिष्ट चौड़ाई को ले लेगा और शेष स्थान बाएं और दाएं किनारों के बीच समान रूप से वितरित किया जाएगा。
इंस्टेंस
उपयोग करें margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
inherit वैल्यू
इस उदाहरण में <p class="ex1"> एलेमेंट के लिए डिव (div) एलेमेंट से लिए गए मार्गिन लेफ्ट इनहरिट किया जाता है:
इंस्टेंस
inherit वैल्यू का उपयोग करना:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
अधिक वांचना
अध्याय:बॉक्स मॉडल: CSS मार्गिन
- पिछला पृष्ठ सीएसएस कोन बॉर्डर
- अगला पृष्ठ सीएसएस माउंट मर्ज
