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 {
  margin-top: -1px;
  margin-left: -1px;
}