تجنب الحدود المكررة في CSS

عندما يتم وضع العناصر المتجاورة ذات الحدود بجوار بعضها البعض، يتم ظهور قطعة أثرية مرئية تُعرف باسم "الحدود المزدوجة" يمكن أن يحدث عند تقاطع الحدود. للتخلص من هذا التأثير غير المرغوب فيه، خذ بعين الاعتبار أساليب CSS التالية:

الخيار 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 { الهامش العلوي: -1 بكسل؛ الهامش الأيسر: -1 بكسل؛