CSS에서 이중 테두리를 피하는 방법: 윤곽선과 음수 여백?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-11-03 05:46:03

원래의

881명이 탐색했습니다.

How to Avoid Double Borders in CSS: Outline vs. Negative Margins?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!