Избежание дублирования границ в CSS

Когда соседние элементы с границами размещаются рядом друг с другом, возникает визуальный артефакт, известный как «двойные границы». может произойти на пересечении границы. Чтобы устранить этот нежелательный эффект, рассмотрите следующие подходы CSS:

Вариант 1: использование свойства Outline

В ситуациях, когда порядок элементов непредсказуем, использование свойства Outline может эффективно предотвращать двойные границы:

.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;
}