सीएसएस में डबल बॉर्डर्स को रोकना

कई वेब डेवलपर्स को एक आम समस्या का सामना करना पड़ता है जब तत्वों को बॉर्डर के साथ-साथ स्टाइल किया जाता है। सीमाओं की प्रकृति के कारण, जहां प्रत्येक तत्व की अपनी सीमा होती है, ऐसा प्रतीत हो सकता है कि तत्वों की दोहरी सीमा है जहां वे मिलते हैं। यह भद्दा हो सकता है और वांछित डिज़ाइन में हस्तक्षेप कर सकता है।

इसे संबोधित करने के लिए, दो सामान्य समाधान हैं: बॉर्डर के बजाय आउटलाइन का उपयोग करना, या नकारात्मक मार्जिन लागू करना।

आउटलाइन का उपयोग करना

रूपरेखा सीमाओं के समान होती है लेकिन केवल तभी दिखाई देती है जब तत्व पर फोकस होता है। यह आपको दोहरे बॉर्डर मुद्दे के बिना बॉर्डर जैसा प्रभाव बनाने की अनुमति देता है। रूपरेखा का उपयोग करने के लिए, बस सीमा घोषणा को रूपरेखा घोषणा से बदलें। उदाहरण के लिए:

.child {
    outline: 1px solid #ccc;
    margin-top: 1px;
    margin-left: 1px;
}

ध्यान दें कि IE7 और इससे पहले के ब्राउज़रों में आउटलाइन समर्थित नहीं हैं।

नकारात्मक मार्जिन का उपयोग करना

नकारात्मक मार्जिन लागू करना एक और प्रभावी तरीका है दोहरी सीमाओं को रोकने के लिए. तत्व के शीर्ष और बाईं ओर नकारात्मक मार्जिन सेट करके, आप तत्व को प्रभावी ढंग से अंदर की ओर स्थानांतरित कर सकते हैं, जिसके परिणामस्वरूप सीमाएं ओवरलैप हो जाएंगी। यह दोहरे बॉर्डर स्वरूप के बिना एकल, साफ़ बॉर्डर बनाता है।

.child {
    margin-top: -1px;
    margin-left: -1px;
}

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