मार्जिन के बारे में बात करते हैं, वह मार्जिन है (भाग 1)

जब पृष्ठ के बाद शुरुआती पृष्ठ बनाते हैं, तो देखते हुए, वे मार्जिन को कम करके बहुत सारी गलतियां करते हैं और पूरी तरह से समझ नहीं पाते हैं कि यह बहुत मार्जिन वास्तव में कैसे काम करता है, मैंने इस लेख को लिखने का फैसला किया।

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

लेख के इस भाग में मैं ऊर्ध्वाधर मार्जिन के बारे में लिखूंगा। हम अगले भाग में क्षैतिज के बारे में बात करेंगे।

शुरुआत करने के लिए, हम संक्षेप में जांच करेंगे कि माप की कौन सी इकाइयाँ हैं, उनका क्या मतलब है और जो इंडेंटेशन के लिए मार्जिन का उपयोग करना है।

सेमी, मिमी, इंच, पीसी, पीटी - माप की निरपेक्ष इकाइयाँ। दस्तावेजों को प्रिंट करने के लिए अनुशंसित।

Px, em, ex,% - मॉनिटर के लिए उपयोग की जाने वाली सापेक्ष इकाइयाँ।

मार्जिन के लिए, मैं px और % का उपयोग करता हूं, और फ़ॉन्ट आकार निर्दिष्ट करने के लिए उन्हें उपयोग करता हूं। Ex (IE पूर्व = em / 2 में) - मैं इसका उपयोग करने की अनुशंसा नहीं करता, क्योंकि प्रत्येक ब्राउज़र में इसकी अलग-अलग व्याख्या की जाती है।

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

देखने का क्षेत्र वह है जहां उपयोगकर्ता स्क्रीन को स्क्रॉल किए बिना साइट की सामग्री को देखता है। प्रत्येक उपयोगकर्ता का एक अलग है।

प्रत्येक टाइप्टर जानता है कि किसी भी तत्व को 4 क्षेत्रों (मार्जिन, सीमा, पैडिंग और सामग्री) के रूप में दर्शाया जा सकता है।

मार्जिन एक इंडेंट है। मार्जिन के ऊर्ध्वाधर और क्षैतिज निर्माण अलग-अलग हैं।

जैसा कि मैंने ऊपर लिखा है, मार्जिन के लिए आकार एम, एक्स, पीएक्स - कठिन कार्य और% में डाल सकते हैं - कुछ क्षेत्र के सापेक्ष माना जाता है।

मैं नौसिखिया लेआउट डिजाइनरों द्वारा की गई सबसे लगातार गलतियों का एक उदाहरण दूंगा।

2 divas हैं: पहला और vnem div दूसरा।

#first{
padding: 100px;
background: #b5bcbc;
}
#second{
height: 100px;
background: #b06b48;
margin: 30% 0 0;
}

कृपया ध्यान दें कि मैंने किसी भी divas को चौड़ाई की संपत्ति निर्धारित नहीं की (हम इस बारे में बाद में बात करेंगे)। अब हम केवल मार्जिन में रुचि रखते हैं, जो मार्जिन के बराबर है: 30% 0 0;

मुझे उम्मीद है कि हर कोई जानता है कि इस मामले में मार्जिन कैसे माना जाता है, बस अगर मैं आपको याद दिलाता हूं कि घड़ी की दिशा क्या है, तो यह है: इंडेंट शीर्ष पर 30%, दाईं ओर 0, तल पर 0 और बाईं ओर 0 होगा, क्योंकि मैं कुछ भी निर्दिष्ट नहीं कर रहा हूं , फिर मार्जिन विपरीत पक्ष के मूल्य को मानता है, अर्थात इस मामले में, यदि दाईं ओर का मार्जिन 0 है, तो बाईं तरफ का मार्जिन, यदि निर्दिष्ट नहीं है, तो भी 0 है।

लेकिन अब हम मार्जिन में रुचि रखते हैं, जो कि 30% है, यह ऊपर से इंडेंट है। ये 30% कहां से आते हैं?

बहुत से लोग सोचते हैं और मानते हैं कि पूरे पृष्ठ के शीर्ष से 30% लिया जाता है।

लेकिन यह सच नहीं है!

चूंकि इस मामले में, div div सेकंड पहले div div में सन्निहित है, तो मार्जिन-टॉप: 30% को पैरेंट डिव div की चौड़ाई के सापेक्ष माना जाएगा, अर्थात पहले div div की चौड़ाई के सापेक्ष!

इस स्थिति में, डिफ़ॉल्ट रूप से पहली div की चौड़ाई ऑटो है, इसलिए div चौड़ाई में सभी खाली स्थान लेता है, और दूसरी div के लिए मार्जिन टॉप का 30% इस चौड़ाई से गणना की जाएगी।

जब माता-पिता दिवा कम हो जाते हैं, तो दूसरी दिवा के ऊपर से इंडेंट भी घट जाएगा।

मार्जिन नकारात्मक भी हो सकता है। इस स्थिति में, तत्व अपने कंटेनर से "ड्रॉप डाउन" या "निचले तल" में एक अन्य तत्व को लंबवत रूप से अनुमति देता है।

उदाहरण के लिए: दो दिव्य एक दूसरे के नीचे स्थित हैं।


यदि हम पहले-दिवा में margin-bottom: -100px और margin-top: -50px
#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: -50px 100px 0;
}

तब निम्नलिखित होगा।

लेकिन ... यहाँ नए लोगों की बड़ी गलती आती है।

बहुत से लोग सोचते हैं कि चूंकि ऊपरी div में मार्जिन-bot -100px है, और निचला div, मार्जिन-टॉप 50px है, निचला div -150px से ऊपरी div में "ड्रॉप" होगा।

त्रुटि!

यदि मार्जिन एक ही नाम (दोनों मार्जिन या एक नकारात्मक या सकारात्मक संख्या) के हैं, तो इस मामले में बड़ी संख्या में मोडुलो लिया जाता है, और एक छोटे को ध्यान में नहीं रखा जाता है।

इस स्थिति में, निम्न div 100x पर ऊपरी div पर "ड्रॉप" करेगा, और 50px को ध्यान में नहीं रखा जाएगा।

सकारात्मक मार्जिन के लिए भी यही सच है, निचले div शीर्ष 100px से "छोड़ देंगे", और 50px को ध्यान में नहीं रखा जाएगा।

निम्नलिखित उदाहरण पर विचार करें।
2 दिवस हैं, एक दूसरे के नीचे।

#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: 50px 100px 0;
}

first
second

जैसा कि आप देख रहे हैं, पहले का मार्जिन बॉट नकारात्मक है, और दूसरे का मार्जिन टॉप सकारात्मक है, इस स्थिति में क्या होगा?

विपरीत मार्जिन के लिए, जोड़ घटित होगा, अर्थात: -100 + 50 = -50। तदनुसार, कम div 50px ऊपर उठ जाएगा।

हम और आगे जा रहे हैं।

दो दिवा, एक दूसरे में निहित है।

#first{
background: #b5bcbc;
}
#second{
height: 200px;
background: #b06b48;
}

यदि आप CSS में आंतरिक diva में मार्जिन शीर्ष 200px जोड़ते हैं,
#second{
height: 200px;
background: #b06b48;
margin-top: 200px;
}


कि, यहाँ एक और गलती है! कुछ का मानना ​​है कि आंतरिक मार्जिन को अपने माता-पिता से 200 गुना नीचे जाना चाहिए और इसके माता-पिता जगह में रहेंगे, और इस तरह खिंचाव होगा।

लेकिन कोई फर्क नहीं पड़ता कि कैसे!

यदि माता-पिता के पास कोई सीमित कारक नहीं है (मैं इन कारकों के बारे में थोड़ा कम लिखूंगा), तो मार्जिन आंतरिक तत्व से बाहरी तक जाता है। फिर, पुरानी योजना के अनुसार, मार्जिन का चयन किया जाता है: यदि वे एक ही नाम के हैं, तो एक बड़ा चयन किया जाता है, यदि वे एक ही नाम के हैं, तो इसके अलावा होता है।
और नतीजा

लेकिन क्या होगा अगर हमें इसकी आवश्यकता नहीं है और हम चाहते हैं कि दिव्यांग माता-पिता का स्थान बना रहे और दिव्यांग बच्चा 200px नीचे चले जाए?

आप इस कार्रवाई को माता-पिता के संबंध में पूर्ववत कर सकते हैं, इसके कई तरीके हैं।
1. मूल ब्लॉक में पैडिंग सेट करना
2. बॉर्डर को पैरेंट ब्लॉक में सेट करना
3. माता-पिता ब्लॉक में अतिप्रवाह की स्थापना, दृश्यमान के अलावा कोई भी मान (पुराने IE को छोड़कर हर जगह काम करता है)
और वोइला

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