CSS에서 이중 테두리를 피하는 방법: 윤곽선과 음수 여백?

CSS에서 테두리 중복 방지

테두리가 있는 인접한 요소가 서로 옆에 배치되면 "이중 테두리"라고 하는 시각적 결함이 발생합니다. 국경 교차로에서 발생할 수 있습니다. 이러한 바람직하지 않은 효과를 제거하려면 다음 CSS 접근 방식을 고려하십시오.

옵션 1: 개요 속성 사용

요소의 순서를 예측할 수 없는 상황의 경우 개요 속성을 사용하면 이중 테두리를 효과적으로 방지하세요:

<code class="css">.collection {
  /* Optional styling */
  margin-top: -1px;
  margin-left: -1px;
}

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

이전 브라우저(IE7 이하)에서는 윤곽선이 지원되지 않습니다.

옵션 2: 테두리가 있는 음수 여백

테두리 사용을 선호하는 경우 음수 여백을 사용하여 이중 테두리를 상쇄하세요.

<code class="css">.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

위 내용은 CSS에서 이중 테두리를 피하는 방법: 윤곽선과 음수 여백?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!