पता करने के लिए क्या
- अपने सीएसएस स्टाइलशीट में एक नियम जोड़ें जो एचटीएमएल तत्वों के सभी मार्जिन और पैडिंग मानों को शून्य पर सेट करता है।
यह लेख बताता है कि कैसे उपयोग करें सीएसएस शून्य करने के लिए मार्जिन और बॉर्डर ताकि आपके वेब पेज हर ब्राउज़र में लगातार प्रदर्शित हों।
मार्जिन और पैडिंग के लिए मूल्यों को सामान्य करना
असंगत बॉक्स मॉडल की समस्या को हल करने का सबसे अच्छा तरीका HTML तत्वों के सभी मार्जिन और पैडिंग मानों को शून्य पर सेट करना है। इस सीएसएस नियम को अपनी स्टाइलशीट में जोड़ने के कुछ तरीके हैं जिनसे आप ऐसा कर सकते हैं:
भले ही यह नियम विशिष्ट नहीं है, क्योंकि यह आपकी बाहरी स्टाइलशीट में है, इसमें डिफ़ॉल्ट ब्राउज़र मानों की तुलना में उच्च विशिष्टता होगी। चूंकि वे डिफ़ॉल्ट हैं जिन्हें आप ओवरराइट कर रहे हैं, यह एक शैली वह पूरा करेगी जो आप करने के लिए निर्धारित कर रहे हैं।
एक बार जब आप सभी मार्जिन और पैडिंग बंद कर देते हैं, तो आपको अपने वेब पेज के विशिष्ट हिस्सों के लिए उन्हें चुनिंदा रूप से चालू करने की आवश्यकता होगी ताकि आपके डिज़ाइन के लिए आवश्यक रूप और अनुभव प्राप्त हो सके।
सीमाओं को सामान्य करने के लिए CSS का उपयोग करें
पुराने इंटरनेट एक्सप्लोरर के संस्करण तत्वों के चारों ओर एक पारदर्शी या अदृश्य सीमा थी। जब तक आप बॉर्डर को 0 पर सेट नहीं करते, वह बॉर्डर आपके पेज लेआउट को गड़बड़ कर सकता है। यदि आपने तय किया है कि आप IE के इन पुरातन संस्करणों का समर्थन करना जारी रखेंगे, तो आपको अपने शरीर और HTML शैलियों में निम्नलिखित जोड़कर इसे संबोधित करना होगा:
एचटीएमएल, बॉडी {
मार्जिन: 0px;
पैडिंग: 0px;
सीमा: 0px;
}
जिस तरह आपने हाशिये और पैडिंग को बंद किया, उसी तरह यह नई शैली भी डिफ़ॉल्ट सीमाओं को बंद कर देगी। आप लेख में पहले दिखाए गए वाइल्डकार्ड चयनकर्ता का उपयोग करके भी ऐसा ही कर सकते हैं।
वेब डिज़ाइन में लगातार मार्जिन और सीमाएँ क्यों मायने रखती हैं?
आज के वेब ब्राउज़र ने पागल दिनों से एक लंबा सफर तय किया है जहां किसी भी प्रकार की क्रॉस-ब्राउज़र स्थिरता इच्छाधारी सोच थी। आज के वेब ब्राउज़र पूरी तरह से मानकों के अनुरूप हैं। वे एक साथ अच्छी तरह से खेलते हैं और विभिन्न ब्राउज़रों में काफी सुसंगत पृष्ठ प्रदर्शन प्रदान करते हैं। इसमें Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari के नवीनतम संस्करण और इस पर पाए जाने वाले विभिन्न ब्राउज़र शामिल हैंअसंख्य मोबाइल डिवाइस आज वेबसाइटों तक पहुंच।
हालांकि ब्राउज़रों द्वारा CSS को प्रदर्शित करने के तरीके में निश्चित रूप से प्रगति हुई है, फिर भी इन विभिन्न सॉफ़्टवेयर विकल्पों के बीच विसंगतियां हैं। आम विसंगतियों में से एक यह है कि वे ब्राउज़र डिफ़ॉल्ट रूप से मार्जिन, पैडिंग और सीमाओं की गणना कैसे करते हैं।
क्योंकि बॉक्स मॉडल के ये पहलू सभी HTML तत्वों को प्रभावित करते हैं, और क्योंकि वे पेज बनाने में आवश्यक हैं लेआउट, असंगत प्रदर्शन का अर्थ है कि एक पृष्ठ एक ब्राउज़र में बहुत अच्छा लग सकता है, लेकिन थोड़ा हटकर दिखता है दूसरा। इस समस्या से निपटने के लिए, कई वेब डिज़ाइनर बॉक्स मॉडल के इन पहलुओं को सामान्य करते हैं। इस अभ्यास को के रूप में भी जाना जाता है शून्य करना मार्जिन के लिए मूल्य, गद्दी, और सीमाएँ।
ब्राउज़र डिफ़ॉल्ट पर एक नोट
वेब ब्राउज़र प्रत्येक पृष्ठ के कुछ प्रदर्शन पहलुओं के लिए डिफ़ॉल्ट सेटिंग्स सेट करते हैं। उदाहरण के लिए, हाइपरलिंक नीले होते हैं और डिफ़ॉल्ट रूप से रेखांकित होते हैं। यह व्यवहार विभिन्न ब्राउज़रों में सुसंगत है, और यद्यपि यह कुछ ऐसा है जिसे अधिकांश डिज़ाइनर डिज़ाइन के अनुरूप बदलते हैं उनकी विशिष्ट परियोजना की ज़रूरतें, यह तथ्य कि वे सभी एक ही चूक से शुरू कर रहे हैं, इन्हें बनाना आसान बनाता है परिवर्तन। अफसोस की बात है कि मार्जिन, पैडिंग और बॉर्डर के लिए डिफ़ॉल्ट मान क्रॉस-ब्राउज़र स्थिरता के समान स्तर का आनंद नहीं लेते हैं।