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