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

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

जब मैंने पिछले छह महीनों के लिए ऑनलाइन प्रदान किए गए एक मुफ्त सीएसएस परीक्षण के परिणामों की जांच की, तो मुझे पता चला एक सवाल है कि लगभग कोई नहीं सही हो गया. परीक्षा देने वाले हजारों लोगों में से, 14% से कम इसे सही मिला.

प्रश्न यह है: आप प्रतिशत मार्जिन की गणना कैसे करते हैं?

प्रश्न

कहो कि आपकी साइट में एक कंटेनर है div, और उसके अंदर, एक सामग्री div:

अब, वह सामग्री दें div एक शीर्ष मार्जिन:

.सामग्री मार्जिन-टॉप: 10%;  

ठीक है, तो यह 10% है ... लेकिन 10% क्या? यही सवाल है केवल 13.8% लोग ही सही उत्तर दे सकते हैं. और ध्यान रखें: इन लोगों की पहुंच Google तक है!

मैं इस सवाल के बारे में क्या प्यार करता हूँ ऐसा लगता है कि उत्तर स्पष्ट होना चाहिए. इतना अधिक, कि मुझे संदेह है कि ज्यादातर लोग सिर्फ अनुमान लगाते हैं (और गलत अनुमान लगाते हैं)। लेकिन शायद यह नहीं है आपको स्पष्ट प्रतीत होता है। मेरा मतलब है, यदि आप वास्तव में अपनी कल्पना का उपयोग करते हैं, तो ऐसे कई तरीके हैं जो ब्राउज़र इस तरह से मार्जिन की गणना कर सकते हैं.

तो कैसे के बारे में अगर मैं इसे तुम्हारे लिए संकीर्ण क्योंकि परीक्षण में सवाल वास्तव में कई विकल्प है। यहाँ आपके विकल्प हैं:

• सामग्री div की ऊंचाई का 10%
• कंटेनर div की ऊंचाई का 10%
• सामग्री div की चौड़ाई का 10%
• कंटेनर div की चौड़ाई का 10%

याद रखें, केवल 13.8% लोग इस सूची से सही उत्तर चुन सकते हैं। यह मौका से भी बदतर है!

उत्तरों को करीब से देखें; आप देखेंगे कि वास्तव में केवल दो चीजें हैं जिन्हें आपको जानना आवश्यक है:

कंटेनर या सामग्री?

पहला, है सामग्री के आकार के आधार पर मार्जिन का आकार स्वयं, या कंटेनर div के आकार पर?

अब यह कोई गम नहीं है, लेकिन आप शायद अपनी प्रवृत्ति पर भरोसा कर सकते हैं। अगर मैं अपने कंटेनर की चौड़ाई का 50% हिस्सा होने के लिए एक div सेट करता हूं, और फिर मैं चाहता हूं कि इसके बाकी हिस्सों को भरने के लिए इसके बाएं और दाएं हाशिये हैं, तो मैं स्वाभाविक रूप से उन्हें 25% तक सेट करूंगा (ताकि प्रतिशत में वृद्धि हो जाए 100%)। काम करने के लिए, प्रतिशत मार्जिन कंटेनर के आयामों पर आधारित होना चाहिए.

निश्चित रूप से, परीक्षा लेने वाले दो तिहाई लोग उत्तर के इस भाग को सही पाते हैं.

चौड़ाई या ऊँचाई?

दूसरा, उस तत्व की चौड़ाई या ऊंचाई के आधार पर मार्जिन-टॉप का आकार है?

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

और फिर भी, मैं शर्त लगा सकता हूं कि आप विश्वास कर सकते हैं उत्तर नहीं है ऊंचाई. खैर, यह नहीं है.

हां, हम यहां एक शीर्ष मार्जिन के बारे में बात कर रहे हैं। हां, उस मार्जिन का आकार एक ऊर्ध्वाधर माप है। हां, अगर कोई ब्लॉक उसके कंटेनर की ऊंचाई का 50% है, और आपने उसे 25% का शीर्ष मार्जिन दिया है, तो आप उम्मीद करेंगे कि कंटेनर की ऊंचाई का 25% हो. और आप गलत होंगे.

बुरा मत मानो अगर आपको लगता है कि यह ऊंचाई होना था। परीक्षा देने वाले लगभग 80% लोग आपसे सहमत हैं:

यह संवेदना ... नहीं, वास्तव में बनाता है!

अभी भी विश्वास नहीं है? यहाँ W3C CSS युक्ति का एक उद्धरण है:

प्रतिशत की गणना उत्पन्न बॉक्स की चौड़ाई के संबंध में की जाती है. ध्यान दें कि यह मार्जिन-टॉप और मार्जिन-बॉट के लिए भी सही है.

यदि आप सोच रहे थे तो वही ऊपर और नीचे की गद्दी के लिए जाता है। सीमाओं के लिए, प्रतिशत के रूप में उनकी चौड़ाई निर्दिष्ट करना अवैध है.

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

क्षैतिज और ऊर्ध्वाधर संगति

बेशक, एक आशुलिपि संपत्ति है जो आपको एक ब्लॉक के सभी चार पक्षों के लिए मार्जिन निर्दिष्ट करने देती है:

मार्जिन: 10%;

इसका विस्तार होता है:

मार्जिन-टॉप: 10%; मार्जिन-राइट: 10%; मार्जिन-नीचे: 10%; मार्जिन-वाम: 10%;

अब, यदि आपने उपरोक्त दोनों में से कोई भी लिखा है, तो आप शायद ब्लॉक के सभी चार किनारों पर समान आकार के होने की उम्मीद करेंगे, क्या आप नहीं करेंगे? लेकिन अगर मार्जिन-लेफ्ट और मार्जिन-राइट कंटेनर की चौड़ाई पर आधारित होते हैं, और मार्जिन-टॉप और मार्जिन-बॉट इसकी ऊंचाई पर आधारित होते हैं, तो वे आमतौर पर अलग होंगे!

सर्कुलर डिपेंडेंसी से बचना

सीएसएस पृष्ठ के लंबवत रूप से ढेर किए गए ब्लॉकों में सामग्री देता है, इसलिए एक ब्लॉक की चौड़ाई आमतौर पर पूरी तरह से उसके माता-पिता की चौड़ाई से तय होती है। दूसरे शब्दों में, आप कर सकते हैं क्या है के बारे में चिंता किए बिना एक ब्लॉक की चौड़ाई की गणना करें के भीतर वह ब्लॉक.

एक ब्लॉक की ऊंचाई एक अलग मामला है। आमतौर पर, ऊंचाई इसकी सामग्री की संयुक्त ऊंचाई पर निर्भर करता है. सामग्री की ऊंचाई बदलें, और आप ब्लॉक की ऊंचाई को बदलते हैं। समस्या देखें?

सामग्री की ऊँचाई प्राप्त करने के लिए, आपको उस पर लागू होने वाले शीर्ष और निचले मार्जिन को जानना होगा। और अगर वे मार्जिन मूल ब्लॉक की ऊंचाई पर निर्भर करते हैं, तो आप मुश्किल में हैं, क्योंकि आप एक दूसरे को जाने बिना गणना नहीं कर सकते!

पर ऊर्ध्वाधर मार्जिन को आधार बनाना चौड़ाई कंटेनर उस परिपत्र निर्भरता को तोड़ता है, और पृष्ठ को बाहर करना संभव बनाता है.

ऐस द क्लास

इसलिए आपके पास यह है: परीक्षण पर सबसे कठिन सवाल, और अब आप इसका जवाब दे सकते हैं। जानना चाहते हैं कि आप बाकी परीक्षा में क्या करेंगे? यह अपने आप का प्रयास करें। मैं वादा करता हूं, अधिकांश प्रश्न इस एक की तुलना में बहुत आसान हैं.

इस बीच, मैं एक नए कठिन सवाल की तलाश में हूँ! CSS का क्या विवरण आपको लगता है कि कोई नहीं जानता है?

संपादक की टिप्पणी: इसके लिए Hongkiat.com लिखा है केविन यांक. केविन ने 1999 से वेब के बारे में लिखा है, PHP, CSS, और जावास्क्रिप्ट पर किताबें उसके नाम के साथ। उन्होंने पॉडकास्ट की मेजबानी भी की, सम्मेलनों में बात की और वेब के बारे में वीडियो प्रशिक्षण का उत्पादन किया। वह अब ऑनलाइन टेस्ट बनाने और लेने के लिए एक वेब एप्लीकेशन, साइट द टेस्ट में लीड करता है.

होंगकीट पर अधिक:

• वेब डिजाइन: सीएसएस के साथ समान स्तंभ ऊंचाई
• 6 सीएसएस ट्रिक्स सामग्री को संरेखित करने के लिए
• सीएसएस इकाइयों में एक नज़र: पिक्सेल, ईएम, और प्रतिशत
• एक नज़र में: CSS3 बॉक्स-आकार

अब पढ़ें: 10 छिपे हुए CSS3 गुण आपको पता होना चाहिए