페이지에서 공간을 차지하지 않고 요소를 숨기는 방법은 무엇입니까?

visibility:hidden특정 요소를 숨기는 데 사용 하고 있지만 숨겨진 동안 여전히 페이지의 공간을 차지합니다.

DOM에 전혀없는 것처럼 보이지만 (실제로 DOM에서 제거하지 않고) 시각적으로 완전히 사라지게하려면 어떻게해야합니까?

display:none숨기고 display:block표시 하도록 설정하십시오 .

대신 스타일을 사용하십시오

<div style="display:none;"></div>

display:none요소를 제거하는 것만으로도 좋은 옵션 을 사용할 수 있지만 화면 판독기에서도 제거됩니다 . 그것이 SEO에 영향을 미치는 경우에도 토론이 있습니다. A List Apart에 관한 주제 에 관한 좋은 기사가 있습니다.

당신이 정말 원하는 경우 숨기기를 하고 제거 할 요소를보다 효율적으로 사용 :

div {
  position: absolute; 
  left: -999em;
}

이와 같이 화면 판독기에서도 읽을 수 있습니다.

이 방법의 유일한 단점은이 DIV가 실제로 렌더링되어 특히 휴대 전화 에서 성능에 영향을 줄 수 있다는 것 입니다.

visibility: hidden;use 대신 사용하십시오 display: none;. 첫 번째 옵션은 숨겨 지지만 여전히 공간을 차지하고 두 번째 옵션은 숨기고 공간을 차지 하지 않습니다 .

이 질문에 대한 답변은 display : none 및 display : block을 사용한다고 말하지만 CSS 전환을 사용하여 가시성 속성을 사용하여 내용을 표시하거나 숨기려는 사람에게는 도움이되지 않습니다.

디스플레이를 사용하면 CSS 전환이 죽기 때문에 이것은 또한 나를 미치게했습니다.

한 가지 해결책은 가시성을 사용하는 클래스에 이것을 추가하는 것입니다.

overflow:hidden

이것이 작동하려면 레이아웃에 달려 있지만 비어있는 내용은 div 내에 있어야합니다.

디스플레이 : none is solution, 그것은 공간이있는 요소를 완전히 숨 깁니다.

스토리에 대한 display:none과visibility: hidden

visibility:hidden 태그가 보이지 않지만 페이지에 태그가 할당되었음을 의미합니다.

display:none공간이있는 요소를 완전히 숨 깁니다. (DOM을 통해 여전히 상호 작용할 수 있지만)

display:none숨기고 보이도록 설정 display:block합니다.

토글 display은 부드러운 CSS 전환을 허용하지 않습니다. 대신 및를 토글 visibility하십시오 max-height.

visibility: hidden;
max-height: 0;

다음은 디스플레이 후에 다시 가져 오는 다른 테이크입니다. display : block / inline 등을 사용하지 마십시오. 대신 (자바 스크립트를 사용하는 경우) CSS 속성 표시를 ''(즉, 공백)으로 설정하십시오.

$('#abc').css({"display":"none"});

이것은 내용을 숨기고 빈 공간을 남기지 않습니다.

내 지식 위에는 네 가지 방법으로 가능합니다

1. HTML<button style="display:none;"></button>
2. CSS #buttonId{ display:none; }
3. jQuery $('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);

디스플레이 : 없음 은 페이지의 공백을 피하는 가장 좋은 방법입니다.

!important기존 CSS 스타일을 재정의해야하는 경우에 사용하십시오 .

display: none !important;