"visibility : collapse"와 "display : none"의 차이점

"visibility : collapse"와 "display : none"의 차이점

---

visibility:collapse과 의 차이점은 무엇입니까 display:none?

---

짧은 버전 :

전자는 테이블 요소를 완전히 숨기는 데 사용됩니다. 후자는 다른 모든 것을 완전히 숨기는 데 사용됩니다.

긴 버전 :

visibility: collapse요소를 완전히 숨기지 만 (레이아웃의 공간을 차지하지 않도록) 요소가 테이블 요소 인 경우에만 .

테이블 요소 이외의 요소에 사용 visibility: collapse하면은 visibility: hidden. 이렇게하면 요소가 보이지 않지만 레이아웃에서 여전히 공간을 차지합니다.

display: none요소를 완전히 숨겨서 레이아웃의 공간을 차지하지 않지만 테이블 요소에 사용해서는 안됩니다.

W3C 참조

---

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>

---

visibility:collapse테이블에서만 사용해야합니다. 다른 요소에서는 visibility:hidden.

visibility:hidden요소를 숨기지 만 여전히 요소의 공간을 차지하지만 공간 display:none도 유지하지 않습니다.

---

자원 :

• w3schools.com-가시성
• w3schools.com-디스플레이

같은 주제에 대해 :

• visible : hidden과 display : none의 차이점은 무엇입니까?
• CSS 속성 : 표시 vs. 가시성
• CSS 표시 : 없음 및 가시성 : 숨김
• opacity : 0은 visibility : hidden과 정확히 같은 효과를 갖습니까?

---

visibility:collapse가 display:none전용 테이블 요소에 대한 동작을. 다른 요소에서는 hidden.

참고 URL : https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone