सब कुछ आप सीएसएस मार्जिन के बारे में पता करने की आवश्यकता है

पहली चीज़ जो हम में से कई ने सीखी थी जब हमने सीएसएस सीखा था, सीएसएस में एक ब्लॉक के विभिन्न घटकों की विशेषताएं थीं, जिन्हें "सीएसएस ब्लॉक मॉडल" के रूप में वर्णित किया गया था। ब्लॉक मॉडल में तत्वों में से एक मार्जिन (बाहरी मार्जिन) है, ब्लॉक के चारों ओर एक पारदर्शी क्षेत्र जो इस ब्लॉक की सामग्री से अन्य तत्वों को पीछे हटाता है। margin-top , margin-right , margin-bottom और margin-left गुणों को सीएसएस 1 के रूप में जल्दी वर्णित किया गया था, साथ ही सभी चार गुणों में एक साथ सेटिंग के लिए संक्षिप्त मार्जिन संपत्ति के साथ।

मार्जिन बहुत सीधा लगता है, हालांकि, इस लेख में हम कुछ बिंदुओं पर गौर करेंगे जिनका उपयोग करते समय लोग ठोकर खाते हैं। विशेष रूप से, मार्जिन एक दूसरे के साथ कैसे बातचीत करते हैं और बाहरी मार्जिन का पतन वास्तव में कैसे काम करता है।

---

सीएसएस ब्लॉक मॉडल

सीएसएस सीएसएस ब्लॉक मॉडल के घटकों के बारे में सभी लेखों के साथ, हमें यह निर्धारित करना चाहिए कि हम इसका क्या मतलब है और मॉडल को सीएसएस के विभिन्न संस्करणों में कैसे वर्गीकृत किया गया था। ब्लॉक मॉडल से तात्पर्य ब्लॉक के विभिन्न अवयवों - सामग्री (पैड), पेडिंग (गद्दी), बॉर्डर (फ्रेम) और मार्जिन (पेडिंग) से है। CSS1 में, ब्लॉक मॉडल को नीचे की छवि में दिखाए गए ASCII आरेख का उपयोग करके चित्रित किया गया था।

ब्लॉक के प्रत्येक पक्ष और शॉर्टहैंड मार्जिन संपत्ति के लिए सभी चार गुण CSS1 में परिभाषित किए गए थे।

CSS2.1 विनिर्देश में ब्लॉक मॉडल को प्रदर्शित करने के लिए एक चित्रण है और उन शर्तों को भी परिभाषित करता है जिनका हम विभिन्न ब्लॉकों का वर्णन करने के लिए उपयोग करना जारी रखते हैं। विनिर्देश सामग्री बॉक्स, पैडिंग बॉक्स, बॉर्डर बॉक्स और मार्जिन बॉक्स का वर्णन करता है, जिनमें से प्रत्येक क्रमशः सामग्री, पैडिंग, बॉर्डर और मार्जिन की सीमाओं द्वारा परिभाषित किया गया है।



वर्तमान में कार्य मॉडल के रूप में ब्लॉक मॉडल 3 संस्करण के लिए एक विनिर्देश है। ब्लॉक मॉडल और मार्जिन को परिभाषित करते समय, यह हमें CSS2 में लौटाता है, इसलिए पूरे लेख में हम CSS2 से परिभाषा का उपयोग करेंगे।

समेटना हाशिया

CSS1 विनिर्देश ने न केवल मार्जिन को परिभाषित किया, बल्कि उनके पतन भी। यह व्यवहार कई निराशाओं का स्रोत बन गया है। जब आप उन दिनों में सीएसएस को पाठ दस्तावेजों के लिए एक मार्कअप भाषा के रूप में उपयोग करते हैं, तो आप समझ सकते हैं कि कॉलैपिंग मार्जिन का मतलब है। कोलैप्सिंग मार्जिन का मतलब है कि जब कम मार्जिन के साथ हेडिंग के बाद शीर्ष मार्जिन वाला पैराग्राफ होता है, तो ये दोनों इंडेंट नहीं जुड़ते हैं, तत्वों के बीच एक बड़ा अंतर पैदा करते हैं।

जब दो मार्जिन गिरते हैं, तो तत्वों के बीच का स्थान दो इंडेंट के बड़े के बराबर हो जाता है। छोटे इंडेंटेशन वास्तव में बड़े के अंदर समाप्त होते हैं

निम्नलिखित स्थितियों में मार्जिन का पतन:

• आस-पास के भाई-बहन (एकल माता-पिता)
• खाली ब्लॉक
• माता-पिता और पहला / अंतिम बच्चा

आसन्न नर्सिंग तत्व

मैं इस विवरण के साथ शुरू करूंगा कि आस-पास के भाई-बहनों के बीच मार्जिन कैसे घटता है। नीचे दिए गए को छोड़कर, यदि आपके पास दो तत्व हैं जो सामान्य धारा में एक के बाद एक प्रदर्शित होते हैं, तो पहले तत्व का निचला मार्जिन बाद के तत्व के ऊपरी मार्जिन के साथ ढह जाएगा।

नीचे दिए गए CodePen उदाहरण में, तीन div तत्व हैं। पहले तत्व के लिए, ऊपरी और निचले मार्जिन 50px हैं, दूसरे के लिए - 20px, तीसरे के लिए - 3em। पहले दो तत्वों के बीच का अंतर 50px है, चूंकि निचले तत्व का निचला मार्जिन ऊपरी तत्व के उच्च मार्जिन द्वारा अवशोषित होता है। दूसरे दो तत्वों के बीच का अंतर 3em है, क्योंकि 3em दूसरे तत्व के निचले मार्जिन पर 20 पिक्सेल से बड़ा है।

खाली ब्लॉक

यदि ब्लॉक खाली है, तो इसका ऊपरी और निचला मार्जिन एक-दूसरे के साथ ढह सकता है। निम्नलिखित CodePen उदाहरण में, empty वर्ग के साथ दूसरा तत्व (दिखाई नहीं देता, क्योंकि यह खाली है) में 50px ऊपरी और निचला मार्जिन है, हालांकि, पहले और तीसरे तत्व के बीच का स्थान 100 पिक्सेल नहीं है, लेकिन 50. यह दो मार्जिन के पतन का एक परिणाम है।

ब्लॉक में कुछ जोड़ना (यहां तक ​​कि पैडिंग) ऊपरी और निचले मार्जिन का उपयोग करने का कारण होगा, ढह नहीं।

माता-पिता और पहला / अंतिम बच्चा

यह मार्जिन पतन परिदृश्यों को लोगों को दूसरों की तुलना में अधिक बार पहेली लगता है, क्योंकि यह सहज नहीं है। अगले CodePen में, हमारे पास क्लास wrapper (आवरण) के साथ एक div , और मैंने इस div लाल रंग div outline प्रॉपर्टी पर सेट किया है, ताकि इसकी सीमाओं को देखा जा सके। तीनों बच्चों में 50 पिक्सल का मार्जिन है। हालांकि, पहले और अंतिम तत्व आवरण तत्व की सीमाओं से सटे हैं; तत्व और आवरण के बीच 50 पिक्सेल का कोई इंडेंटेशन नहीं है।


ऐसा इसलिए है क्योंकि बच्चे का मार्जिन माता-पिता के किसी भी मार्जिन से इस तरह से ढह जाता है कि वह माता-पिता के बाहर समाप्त हो जाता है। आप इसे देख सकते हैं यदि आप डेवलपर ब्राउज़र पैनल का उपयोग करके बच्चे का परीक्षण करते हैं। पीले रंग में प्रकाश डाला गया क्षेत्र मार्जिन है।

केवल हाशिया को संक्षिप्त करें

अंतिम उदाहरण भी मार्जिन के पतन के बारे में कुछ उजागर करता है। CSS2 में, केवल ऊर्ध्वाधर (ऊपरी और निचले) हाशिये ढहने के लिए डिज़ाइन किए गए थे। इसलिए, ऊपर दिए गए उदाहरण में, बाईं और दाईं ओर मार्जिन आवरण के अंदर नहीं गिरता और समाप्त होता है।

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

रोकथाम को रोकें

तत्व पूर्ण स्थिति या float संपत्ति में सेट होने पर मार्जिन गिरता नहीं है। हालांकि, यदि आप ऐसी स्थिति में हैं जहां मार्जिन में गिरावट आती है, तो इसे कैसे रोका जा सकता है?

कुछ के बीच में होने पर एक स्थिति में कोलैप्सिंग मार्जिन नहीं होता है।

उदाहरण के लिए, खाली ब्लॉक के ऊपरी और निचले हाशिये ध्वस्त नहीं होते यदि ब्लॉक सीमा या पैडिंग पर सेट होता है। नीचे दिए गए उदाहरण में, मैंने 1px पैडिंग ब्लॉक जोड़ा। अब ब्लॉक के ऊपरी और निचले हिस्से में 50px का मार्जिन है।


यह तर्क है: यदि एक खाली ब्लॉक में कोई सीमा या पैडिंग नहीं है, तो यह लगभग अदृश्य हो जाता है। उदाहरण के लिए, यह आपके CMS के मार्कअप में रखा गया एक खाली पैराग्राफ हो सकता है। यदि आपके सीएमएस ने अनावश्यक पैरा तत्वों को जोड़ा है, तो आप शायद नहीं चाहेंगे कि वे अन्य पैराग्राफों के बीच बड़े इंडेंटेशन का कारण बनें क्योंकि उनके मार्जिन को ध्यान में रखा जाता है। ब्लॉक में कुछ जोड़ें और ये इंडेंट प्राप्त करें।

इसी तरह के व्यवहार को पहले या अंतिम बच्चे के मार्जिन के साथ देखा जा सकता है जिसका मार्जिन माता-पिता से परे है। यदि हम माता-पिता के लिए एक सीमा जोड़ते हैं, तो बच्चे का मार्जिन अंदर रहेगा।


और फिर, इस व्यवहार में तर्क है। यदि आपके पास शब्दार्थ प्रयोजनों के लिए आवरण तत्व हैं जो नेत्रहीन रूप से प्रदर्शित नहीं होते हैं, तो आप संभवतः नहीं चाहते कि प्रदर्शित होने पर वे बड़े इंडेंटेशन का निर्माण करें। यह अधिक उपयोगी था जब वेब ज्यादातर पाठ था। और यह व्यवहार कम उपयोगी है जब हम लेआउट तत्वों का उपयोग करते हैं।

"ब्लॉक स्वरूपण संदर्भ" बनाना

नया "ब्लॉक फ़ॉर्मेटिंग कॉन्सेप्ट" (BFC) मार्जिन को मूल तत्व से बाहर गिरने से रोकेगा। यदि हम पहले और अंतिम बच्चों के उदाहरण पर फिर से नज़र डालते हैं, जिनके हाशिये आवरण तत्व की सीमा से बाहर आते हैं और आवरण को display: flow-root करने के लिए सेट करते display: flow-root , इस प्रकार BFC बनाने से बच्चों का मार्जिन अंदर ही रहेगा।


display: flow-root बारे में अधिक जानने के display: flow-root , मेरा लेख " सीएसएस लेआउट और ब्लॉक स्वरूपण संदर्भ को समझना " पढ़ें। auto के लिए overflow संपत्ति के मूल्य को बदलने का एक ही प्रभाव होगा, क्योंकि यह एक नया बीएफसी भी बनाता है, हालांकि यह स्क्रॉलबार को जन्म दे सकता है जो कुछ मामलों में आवश्यक नहीं हैं

फ्लेक्स और ग्रिड कंटेनर

फ्लेक्स और ग्रिड कंटेनर बच्चों के लिए फ्लेक्स और ग्रिड स्वरूपण संदर्भ सेट करते हैं, इसलिए उनके पास अलग-अलग ब्लॉक लेआउट व्यवहार होता है। इनमें से एक अंतर यह है कि मार्जिन गिरता नहीं है:

एक फ्लेक्स कंटेनर सामग्री के लिए एक नया फ्लेक्स स्वरूपण संदर्भ सेट करता है। यह ब्लॉक स्वरूपण संदर्भ सेट करने के समान है, सिवाय इसके कि ब्लॉक मार्कअप के बजाय फ्लेक्स मार्कअप का उपयोग किया जाता है। उदाहरण के लिए, फ़्लोट्स एक फ्लेक्स कंटेनर के अंदर काम नहीं करते हैं, और एक फ्लेक्स कंटेनर का मार्जिन बाल तत्वों के मार्जिन के साथ नहीं गिरता है।
- फ्लेक्सबॉक्स स्तर 1

यदि हम ऊपर उदाहरण लेते हैं और इसे फ्लेक्स कंटेनर के साथ लपेटते हैं, तो फ्लेक्स-दिशा के मुख्य अक्ष की दिशा का संकेत देते हुए: कॉलम, यह स्पष्ट हो जाता है कि अब बच्चों का मार्जिन लपेट से परे नहीं जाता है। इसके अतिरिक्त, आसन्न फ्लेक्स आइटम के बीच मार्जिन में गिरावट नहीं होती है, इसलिए हमें फ्लेक्स आइटम के बीच 100 पिक्सल की दूरी मिलती है, जो कि शीर्ष और निचले मार्जिन का योग है, जो प्रत्येक 50px है।

आपकी वेबसाइट के लिए मार्जिन रणनीतियाँ

पतन के कारण, एक अच्छा समाधान आपकी साइट पर मार्जिन के साथ काम करने के लिए एक सुसंगत तरीका पेश करना होगा। आप जो सबसे सरल काम कर सकते हैं, वह है तत्वों के केवल ऊपरी या निचले हिस्से पर मार्जिन सेट करना। इस मामले में, आपको बहुत बार पतन की समस्याओं का सामना नहीं करना चाहिए, जिस तरफ से मार्जिन सेट किया गया है, वह हमेशा मार्जिन के बिना अन्य तत्व के किनारे से सटेगा।

नोट : हैरी रॉबर्ट्स के पास एक उत्कृष्ट प्रकाशन है जिसके कारण एक दिशा में मार्जिन सेट करना केवल एक अच्छा विचार है, और पतन समस्याओं को हल करने के कारण ही नहीं।

यह दृष्टिकोण माता-पिता की सीमाओं से परे बाल तत्वों से गिरने वाले मार्जिन की समस्या को हल नहीं करता है, जो कि आपका सामना कर सकता है। यह विशेष रूप से समस्या आम तौर पर कम है और यह क्यों हो रहा है यह समझने में मदद मिल सकती है। आदर्श समाधान उन घटकों को सेट करना है जिन्हें display: flow-root करने के लिए इसकी आवश्यकता होती है display: flow-root , और पुराने ब्राउज़रों के लिए फ़ॉलबैक (फ़ॉलबैक) के साथ, आप एक BFC (ब्लॉक स्वरूपण संदर्भ) बनाने के लिए overflow का उपयोग कर सकते हैं; माता-पिता को एक फ्लेक्स कंटेनर में बदल दें; या 1 p गद्दी पर भी सेट करें। ध्यान रखें कि आप display: flow-root लिए गुणों के लिए ब्राउज़र समर्थन अनुरोध का उपयोग कर सकते हैं यदि display: flow-root संपत्ति का समर्थन किया जाता है ताकि केवल पुराने ब्राउज़रों को कम इष्टतम समाधान मिल सके।

मेरा मानना ​​है कि ज्यादातर मामलों में, यह समझना कि मार्जिन गिरना (या नहीं) क्यों महत्वपूर्ण है। यह आपको यह निर्धारित करने की अनुमति देगा कि प्रत्येक मामले में इससे कैसे निपटें। आप जो भी विधि चुनते हैं, इस जानकारी को अपनी टीम के साथ साझा करें। अक्सर, मार्जिन का पतन थोड़ा रहस्यमय होता है, इसलिए इससे निपटने के तरीके हमेशा स्पष्ट नहीं होते हैं। आपके कोड में एक टिप्पणी उपयुक्त हो सकती है - आप इसमें इस लेख का लिंक भी शामिल कर सकते हैं और मार्जिन के बारे में ज्ञान साझा करने में मदद कर सकते हैं।

मैंने तय किया कि मैं इस लेख को मार्जिन से संबंधित कुछ अतिरिक्त डेटा के साथ पूरक करूंगा।

ब्याज का मार्जिन

जब आप CSS में प्रतिशत का उपयोग करते हैं, तो यह किसी चीज़ का प्रतिशत होना चाहिए। मार्जिन (और साथ ही पैडिंग) एक प्रतिशत के रूप में सेट हमेशा मूल तत्व की चौड़ाई के सापेक्ष गणना की जाएगी। इसका मतलब यह है कि प्रतिशत का उपयोग करते समय, आपके पास तत्व के चारों ओर हमेशा समान मार्जिन होगा।

नीचे दिए गए CodePen उदाहरण में, मेरे पास 200px की चौड़ाई के साथ एक आवरण है, जिसके अंदर एक ब्लॉक है जिसमें मार्जिन = 10% है। सभी तरफ से मार्जिन 20px है, जो 200px का 10% है।

एक प्रवाह पर निर्भर दुनिया में मार्जिन

इस लेख के दौरान, हमने ऊर्ध्वाधर मार्जिन के बारे में बात की, हालांकि, आधुनिक सीएसएस, एक नियम के रूप में, भौतिक पक्षों के सापेक्ष धारा से अधिक तत्वों के स्थान के बारे में सोचता है। इसलिए, जब हम ऊर्ध्वाधर मार्जिन के बारे में बात करते हैं, तो हम वास्तव में ब्लॉक आयाम में मार्जिन के बारे में बात कर रहे हैं। ये मार्जिन क्षैतिज लेखन मोड में ऊपरी या निचले हो सकते हैं, या ऊर्ध्वाधर मोड में दाएं या बाएं हो सकते हैं।

प्रवाह के सापेक्ष तार्किक दिशाओं के साथ काम करने के बाद, ऊपर और नीचे की तुलना में ब्लॉक की शुरुआत और अंत के बारे में बात करना आसान हो जाता है। इसे आसान बनाने के लिए, CSS में बूलियन प्रॉपर्टीज़ और वैल्यूज़ का एक स्पेसिफिकेशन पेश किया गया था। यह भौतिक गुणों को प्रवाह से संबंधित गुणों से बदल देता है।

यदि हम मार्जिन के बारे में बात करते हैं, तो यह हमें निम्नलिखित विकल्प देता है (यदि हम अंग्रेजी से या किसी अन्य क्षैतिज रूप से रिकॉर्ड किए गए मोड के साथ पाठ की दिशा में बाएं से दाएं काम करते हैं)।

• मार्जिन-टॉप = मार्जिन-ब्लॉक-स्टार्ट
• मार्जिन-राइट = मार्जिन-इनलाइन-एंड
• मार्जिन-बॉटम = मार्जिन-ब्लॉक-एंड
• मार्जिन-लेफ्ट = मार्जिन-इनलाइन-स्टार्ट

हमारे पास दो नए संक्षिप्त गुण भी हैं:

• मार्जिन-ब्लॉक
• मार्जिन इनलाइन

निम्नलिखित कोड उदाहरण में, मैंने स्ट्रीम-संबंधित कीवर्ड का उपयोग किया और फिर ब्लॉक वर्तनी मोड को बदल दिया। आप देख सकते हैं कि भौतिक पक्षों से बंधे होने के बजाय मार्जिन पाठ धारा का पालन कैसे करते हैं।


आप तार्किक गुणों और मूल्यों के बारे में एमडीएन पर या मेरे लेख "स्मैशिंग मैगज़ीन पर तार्किक गुणों और मूल्यों" को पढ़ सकते हैं।

निष्कर्ष में

अब आप अधिकांश जानते हैं कि आपको मार्जिन के बारे में क्या जानना चाहिए। संक्षेप में:

• मार्जिन गिर सकता है। यह समझना कि यह कब होता है और कब नहीं, आपको उन समस्याओं को हल करने में मदद करेगा जो वे बना सकते हैं।
• केवल एक दिशा में मार्जिन स्थापित करने से उनसे जुड़ी कई समस्याएं हल हो जाती हैं।
• किसी भी सीएसएस स्थिति के साथ, आपके द्वारा किए गए निर्णयों को अपनी टीम के साथ साझा करें और अपने कोड पर टिप्पणी करें
• भौतिक पक्षों के बजाय ब्लॉक और लाइन माप को ध्यान में रखते हुए, ऊपर, दाएं, नीचे, और बाएं आपकी मदद करेंगे, क्योंकि वेब लेखन मोड से स्वतंत्र होने की ओर बढ़ रहा है