मार्जिन - सीएसएस-ट्रिक्स

marginसंपत्ति, बॉक्स मॉडल की सबसे बाहरी हिस्से को परिभाषित करता है किसी भी परिभाषित सीमाओं के एक तत्व के आसपास अंतरिक्ष, बाहर का निर्माण।

मार्जिन को लंबाई, प्रतिशत या कीवर्ड का उपयोग करके सेट किया जाता है autoऔर इसमें नकारात्मक मान हो सकते हैं। यहाँ एक उदाहरण है:

.box ( margin: 0 3em 0 3em; )

margin एक आशुलिपि संपत्ति है और चार मूल्यों तक को स्वीकार करता है, यहाँ दिखाया गया है:

.box ( margin: || || || )

यदि चार से कम मान सेट किए गए हैं, तो जो मान परिभाषित किए गए हैं, उनके आधार पर अनुपलब्ध मान मान लिए गए हैं। उदाहरण के लिए, निम्नलिखित दो नियम सेट समान परिणाम प्राप्त करेंगे:

.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )

इस प्रकार, यदि केवल एक मान को परिभाषित किया जाता है, तो यह सभी चार मार्जिन को समान मान पर सेट करता है। यदि तीन मान घोषित किए जाते हैं, तो यह है margin: (top) (left-and-right) (bottom);।

किसी भी व्यक्तिगत मार्जिन को लॉन्गहैंड का उपयोग करते हुए घोषित किया जा सकता है, इस स्थिति में आप प्रति संपत्ति केवल एक मूल्य निर्धारित करेंगे:

.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )

auto और केंद्र

प्रत्येक मार्जिन गुण भी मान को स्वीकार कर सकता है auto। autoमूल रूप से आपके लिए मार्जिन को परिभाषित करने के लिए ब्राउज़र का एक मान बताता है। ज्यादातर मामलों में, का एक मूल्य (जो प्रत्येक मार्जिन संपत्ति के लिए प्रारंभिक मूल्य है) के autoबराबर होगा 0या तत्व के उस तरफ जो भी जगह उपलब्ध है, उसके बराबर है । हालांकि, autoक्षैतिज केंद्र के लिए काम है:

.container ( width: 980px; margin: 0 auto; )

इस उदाहरण में, दो चीजें इस तत्व को क्षैतिज रूप से उपलब्ध स्थान के भीतर केन्द्रित करने के लिए की जाती हैं:

• तत्व को एक निर्दिष्ट चौड़ाई दी गई है
• बाएँ और दाएँ हाशिये पर सेट हैं auto

निर्दिष्ट चौड़ाई के बिना, autoमानों का अनिवार्य रूप से कोई प्रभाव नहीं होगा, 0जो कि मूल तत्व के अंदर उपलब्ध स्थान के लिए या फिर बाएं और दाएं मार्जिन को सेट करना है ।

यह भी बताया जाना चाहिए कि autoकेवल क्षैतिज केंद्रित के लिए उपयोगी है, और इसलिए autoशीर्ष और नीचे के मार्जिन के लिए उपयोग करना एक तत्व को लंबवत रूप से केंद्रित नहीं करेगा, जो शुरुआती लोगों के लिए भ्रमित हो सकता है।

ढहते हुए हाशिये

एक-दूसरे को छूने वाले विभिन्न तत्वों पर कार्यक्षेत्र मार्जिन (इस प्रकार कोई सामग्री नहीं है, पैडिंग, या उन्हें अलग करने वाली सीमाएं) ध्वस्त हो जाएंगी, एक एकल मार्जिन का गठन होगा जो आसन्न मार्जिन के अधिक से अधिक के बराबर है। यह क्षैतिज मार्जिन (बाएं और दाएं) पर नहीं होता है, केवल ऊर्ध्वाधर (ऊपर और नीचे)।

उदाहरण के लिए, निम्नलिखित HTML लें:

Collapsing Margins
Example text.

और निम्नलिखित सीएसएस:

h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )

इस उदाहरण में, h2तत्व को 20px का निचला मार्जिन दिया गया है। पैराग्राफ तत्व, जो तुरंत स्रोत में इसका अनुसरण करता है, का शीर्ष मार्जिन 10px है।

सामान्य ज्ञान से प्रतीत होता है कि ऊर्ध्वाधर h2और पैराग्राफ के बीच की लंबवत मार्जिन मोटाई कुल 30px (20px + 10px) होगी। लेकिन मार्जिन पतन के कारण, वास्तविक मोटाई 20px तक समाप्त हो जाती है। यह नीचे दिए गए एम्बेडेड पेन में दिखाया गया है:

इस पेन को देखें!

हालाँकि, पहली नज़र में, कुछ हद तक अप्रभावी लग सकते हैं, वे वास्तव में कुछ कारणों से उपयोगी हैं। सबसे पहले, वे खाली तत्वों को अतिरिक्त, आमतौर पर अवांछनीय, ऊर्ध्वाधर मार्जिन स्थान को जोड़ने से रोकते हैं।

दूसरा, वे पृष्ठ तत्वों में सार्वभौमिक मार्जिन घोषित करने के लिए अधिक सुसंगत दृष्टिकोण की अनुमति देते हैं। उदाहरण के लिए, शीर्षकों में सामान्यतः लंबवत मार्जिन स्पेस होता है, और इसलिए पैराग्राफ करते हैं। यदि मार्जिन नहीं गिरा, तो पैराग्राफ (या इसके विपरीत) का अनुसरण करने वाले शीर्षकों को अक्सर ऊर्ध्वाधर रिक्ति की एक समान मात्रा प्राप्त करने के लिए तत्वों में से एक पर मार्जिन को रीसेट करने की आवश्यकता होगी।

तीसरा, मार्जिन पतन नेस्टेड तत्वों पर भी लागू होता है। निम्नलिखित कलम को देखें:

इस पेन को देखें!

यहां, पैराग्राफ तत्व में 30px पर एक शीर्ष मार्जिन सेट है, और div40px के शीर्ष मार्जिन के साथ एक तत्व के अंदर नेस्टेड है । इसके अलावा, h2तत्व में नीचे 20px का मार्जिन है।

फिर से, सामान्य ज्ञान यह सुझाव देगा कि यहां कुल ऊर्ध्वाधर मार्जिन स्पेस 90px (20px + 40px + 30px) होगा, लेकिन इसके बजाय मार्जिन सभी एक एकल 40px मार्जिन (तीनों में उच्चतम) में ढह जाते हैं। यह ज्यादातर मामलों में सहायक है क्योंकि अतिरिक्त ऊर्ध्वाधर स्थान को हटाने के लिए किसी भी शीर्ष मार्जिन को फिर से परिभाषित करने की आवश्यकता नहीं है।

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

जैसा कि आप संदेह कर सकते हैं, जबकि एक सकारात्मक मार्जिन मूल्य अन्य तत्वों को दूर धकेलता है, एक नकारात्मक मार्जिन या तो तत्व को उस दिशा में खींच लेगा, या अन्य तत्वों को अपनी ओर खींच लेगा।

पैडिंग के साथ एक कंटेनर का एक उदाहरण यहां दिया गया है, और हेडर एच 2 में नकारात्मक मार्जिन है जो खुद को उस पैडिंग के माध्यम से वापस किनारों तक खींचता है:

कोडन
पर क्रिस कॉयर (@chisciscoyier) द्वारा नकारात्मक मार्जिन के लिए पेन मोस्ट कॉमन यूज़ केस देखें ।

यहां एक उदाहरण है जहां पहले पैराग्राफ में एक नकारात्मक निचला मार्जिन है, जो अगले पैराग्राफ को खिलाफ खींचता है।

कोड नेग
पर क्रिस कॉयर (@chriscoyier) द्वारा नीचे पैरा खींचने वाले पेन निगेटिव मार्जिन देखें ।

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है

IE6 दोहरी फ्लोट-मार्जिन बग के लिए प्रवण होता है, जिसे ज्यादातर मामलों display: inlineमें फ्लोटेड तत्व में जोड़कर हल किया जा सकता है।