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

CSS에서 "이중" 테두리 방지

테두리가 있는 인접한 두 요소를 나란히 배치하면 마치 테두리가 있는 것처럼 보일 수 있습니다. 그들이 만나는 교차점에 이중 경계선이 있습니다. 이러한 시각적 아티팩트를 방지하려면 다음 CSS 기술을 고려하십시오.

테두리 대신 윤곽선 사용

어떤 순서로든 나타날 수 있는 요소의 경우 개요 속성은 신뢰할 수 있는 해결책:

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

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

음수 여백

또는 하위 요소에 음수 여백을 사용하면 이중 테두리가 효과적으로 "지워집니다":

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

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

기존 브라우저 참고 사항

IE7 이하와 같은 이전 브라우저에서는 개요 속성이 지원되지 않습니다. 이런 경우에는 음수 마진 접근 방식을 권장합니다.

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