आपल्या मार्जिन्स आणि बॉर्डरला शून्य करण्यासाठी सीएसएसचा वापर करा

आजच्या वेब ब्राउझरमध्ये विलक्षण दिवसांपासून एक लांब मार्ग आला आहे जिथे कुठल्याही क्रॉस-ब्राऊझरची सुसंगती इच्छाशक्तीचा विचार होती. आजचे वेब ब्राउझर सर्व अतिशय मानक-अनुरूप आहेत. ते छानपणे एकत्र खेळतात आणि विविध ब्राउझरमध्ये एकसंध सुसंगत पृष्ठ प्रदर्शित करतात. यामध्ये गुगल क्रोम, मायक्रोसॉफ्ट एज, मोझिला फायरफॉक्स, ऑपेरा, सफारी व मोबाईल डिव्हायसेसच्या अनन्य संख्येत आढळणारे विविध ब्राऊझर यांचा समावेश आहे.

वेब ब्राऊजरच्या बाबतीत आणि प्रगती कशी केली जाते याबद्दल प्रगती निश्चितपणे तयार केली जात असताना, या विविध सॉफ्टवेअर पर्यायांमधील विसंगती अजूनही आहेत. सामान्य विसंगती म्हणजे सामान्यत: ब्राउझरची मार्जिन, पॅडिंग आणि सीमा यांची गणना कसे करतात ते.

बॉक्स मॉडेलच्या या पैलूंमुळे सर्व HTML घटक प्रभावित होतात आणि ते पृष्ठ लेआउट तयार करण्यासाठी आवश्यक असल्यामुळे, एक असमान प्रदर्शन याचा अर्थ असा की एका पृष्ठावर एक पृष्ठ चांगले दिसू शकते परंतु दुसर्यामध्ये थोडीशी दिसत आहे. या समस्येचा सामना करण्यासाठी, बर्याच वेब डिझाइनर बॉक्स मॉडेलच्या या पैलूंचे मानक बदलतात. हा अभ्यास मार्जिन्स, पॅडिंग आणि बॉर्डरच्या मूल्यांना "शून्य करणे" म्हणून देखील ओळखले जाते.

ब्राउझर डीफॉल्टवर एक टीप

एका पृष्ठाच्या विशिष्ट प्रदर्शन पैलूंसाठी सर्व वेब ब्राउझरमध्ये डीफॉल्ट सेटिंग्ज असतात उदाहरणार्थ, हायपरलिंक निळा आहेत आणि मुलभूतरित्या अधोरेखित करतात. हे विविध ब्राउझरमध्ये सुसंगत आहे, आणि जरी काही डिझाइनर त्यांच्या विशिष्ट प्रकल्पाच्या डिझाईन गरजा भागविण्यासाठी बदलत असले तरीही, ते सर्व एकाच डीफॉल्टसह सुरू होत असल्याने हे बदल करणे सुलभ करते. दुःखाची गोष्ट म्हणजे, समास, पॅडिंग आणि किनार्यांसाठी डीफॉल्ट मूल्य क्रॉस-ब्राऊझरच्या सुसंगततेचे समान स्तर अनुभवत नाही.

मार्जिन आणि पॅडिंगसाठी सामान्यीकृत मूल्य

विसंगत बॉक्स मॉडेलच्या समस्येचे निराकरण करण्याचा सर्वोत्कृष्ट मार्ग म्हणजे सर्व घटक आणि HTML घटकांचे पॅडिंग मूल्य शून्यवर सेट करणे. आपण असे करू शकता असे काही मार्ग आहेत हे CSS नियम आपल्या शैलीशीटमध्ये जोडणे आहे:

* {समास: 0; पॅडिंग: 0; }

हा CSS नियम * किंवा वाइल्डकार्ड वर्ण वापरतो. तो अक्षर "सर्व घटक" असा आहे आणि तो मुळात प्रत्येक HTML घटक निवडेल आणि मार्जिन व पॅडिंग 0 वर सेट करेल. जरी हे नियम फारच अनपेक्षित आहे, कारण ते आपल्या बाह्य स्टिकशीटमध्ये आहे, त्यास डीफॉल्ट ब्राउझरपेक्षा उच्च विशिष्टता मिळेल मूल्ये त्या मूलभूत आहेत जे तुम्ही ओव्हरराईट करीत आहात, ही एक शैली आपण जे काही करत आहात ते पूर्ण करेल.

एचटीएमएल आणि बॉडी ऍलेंटसमध्ये हे व्हॅल्यूज वापरणे हा दुसरा पर्याय आहे. कारण आपल्या पृष्ठाचे सर्व इतर घटक या दोन घटकांचेच असतील, कारण CSS कॅस्केडने या मूल्यांना अशा इतर घटकांना लागू केले पाहिजेत.

html, शरीर {समास: 0; पॅडिंग: 0; }

हे आपले डिझाइन सर्व ब्राऊझर्सवर त्याच ठिकाणी सुरू करेल, पण लक्षात ठेवा एक गोष्ट अशी आहे की आपण एकदा सर्व मार्जिन चालू केले आणि पॅडिंग बंद केले, तेव्हा आपण आपल्या वेब पृष्ठाच्या विशिष्ट भागांसाठी निवड करणे त्यांना निवडणे आवश्यक आहे. आणि आपल्या डिझाइन साठी कॉल की वाटत.

सीमा

आपण कदाचित विचार करत आहात "परंतु कोणत्याही ब्राउझरकडे डिफॉल्टच्या शरिरावर शरीर नाही." हे काटेकोरपणे खरे नाही. इंटरनेट एक्स्प्लोररच्या जुन्या आवृत्त्यांमधील घटकांची पारदर्शक किंवा अदृश्य सीमा आहे. आपण सीमा 0 पर्यंत सेट करेपर्यंत, त्या सीमेबाहेर आपल्या पृष्ठाच्या लेआउट्स बिघडू शकतात. आपण IE च्या या प्राचीन आवृत्त्यांना समर्थन देत राहिल असे आपण ठरवले असेल तर, आपल्या शरीरास आणि HTML शैलीमध्ये खालील गोष्टी जोडून आपण याचे निराकरण करावे लागेल:

HTML, शरीर {
समास: 0 पिक्सेल;
पॅडिंग: 0 पिक्सेल;
सीमा: 0 पिक्स;
}

आपण मार्जिन आणि पॅडिंग कसे बंद केले यासारखीच, ही नवीन शैली डीफॉल्ट सीमा बंद करेल. पूर्वीच्या दर्शवलेल्या वाइल्डकार्ड निवडकर्त्याचा वापर करून आपण देखील असेच करू शकता.

जेनिफर क्रिनिन द्वारे मूळ लेख. 9/27/16 रोजी जेरेमी गिरर्ड द्वारा संपादित.