Vermeiden doppelter Ränder in CSS

Wenn benachbarte Elemente mit Rändern nebeneinander platziert werden, entsteht ein visuelles Artefakt, das als „doppelte Ränder“ bekannt ist. kann am Grenzübergang auftreten. Um diesen unerwünschten Effekt zu beseitigen, ziehen Sie die folgenden CSS-Ansätze in Betracht:

Option 1: Verwenden der Outline-Eigenschaft

In Situationen, in denen die Reihenfolge der Elemente unvorhersehbar ist, kann die Verwendung der Outline-Eigenschaft dies tun Doppelte Grenzen wirksam verhindern:

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

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

Beachten Sie, dass Umrisse in älteren Browsern (IE7 und früher) nicht unterstützt werden.

Option 2: Negative Ränder mit Rändern

Bei Verwendung von Rändern wird bevorzugt, negative Ränder verwenden, um den doppelten Rand auszugleichen:

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