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

जब बॉर्डर वाले आसन्न तत्वों को एक-दूसरे के बगल में रखा जाता है, तो एक दृश्य कलाकृति जिसे "डबल बॉर्डर" के रूप में जाना जाता है सीमा चौराहे पर घटित हो सकता है। इस अवांछनीय प्रभाव को खत्म करने के लिए, इन सीएसएस दृष्टिकोणों पर विचार करें:

विकल्प 1: आउटलाइन प्रॉपर्टी का उपयोग करना

ऐसी स्थितियों के लिए जहां तत्वों का क्रम अप्रत्याशित है, आउटलाइन प्रॉपर्टी का उपयोग किया जा सकता है दोहरी सीमाओं को प्रभावी ढंग से रोकें:

.collection {
  /* Optional styling */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid; /* Replaces border */
  margin-top: 1px;
  margin-left: 1px;
}

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

विकल्प 2: बॉर्डर के साथ नकारात्मक मार्जिन

यदि बॉर्डर का उपयोग कर रहे हैं को प्राथमिकता दी जाती है, डबल बॉर्डर को ऑफसेट करने के लिए नकारात्मक मार्जिन नियोजित करें:

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