[html] “visibility : collapse”와 “display : none”의 차이점

visibility: collapsevisibility: hidden대부분의 서식 지정 컨텍스트에서 와 똑같이 작동 합니다. 요소에 필요한 공간은 레이아웃에서 ‘예약’되지만 요소 자체는 렌더링되지 않고 빈 공간을 남겨 둡니다.

내가 아는 세 가지 예외가 있습니다 : table-rows, table-columns 및 flex 항목 visibility: collapse은.처럼 동작 display: none하지만 한 가지 큰 차이점이 있습니다 : ‘strut’. 스트럿은 레이아웃 프로세스에서 자체 공간을 요구하지 않지만 여전히 형식화 구조의 일부이며 일부 크기 계산에 참여하는 크기가 0 인 자리 표시 자로 생각할 수 있습니다.

예를 들어 접힌 테이블 행은 테이블의 수직 공간을 차지하지 않지만 테이블 열은 접힌 행과 그 내용이 실제로 보이는 것처럼 ‘그대로’치수가 지정됩니다. 이것은 행이 안팎으로 토글 될 때 열이 ‘흔들리는’것을 방지하기위한 것입니다. 마찬가지로 접힌 플렉스 아이템은 주축을 따라 공간을 차지하지 않지만 여전히 플렉스 라인 교차 크기에 기여합니다.

‘ display: none테이블과 함께 사용하지 마십시오 ‘는 귀중한 경험 법칙이지만 전체 이야기를 말해주지는 않습니다.

• display: none숨겨진 요소가 테이블 (또는 플렉스 라인) 레이아웃 프로세스에 어떤 식 으로든 참여하지 않도록 하려면 사용 합니다.
• visibility: collapse테이블 (또는 플렉스 라인) 레이아웃을 불안정하게하지 않고 요소를 동적으로 표시하고 숨기려는 경우 사용 합니다.

다음은 테이블 행 display: none과 의 차이를 보여주는 코드 스 니펫입니다 visibility: collapse.

.show-right-border {
  border-right: 1px black solid;
}

<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>