Como ocultar elementos sem que eles ocupem espaço na página?

228

Estou usando visibility:hiddenpara ocultar certos elementos, mas eles ainda ocupam espaço na página enquanto ocultos.

Como posso fazê-los desaparecer totalmente visualmente, como se não estivessem no DOM (mas sem realmente removê-los do DOM)?

html css ripper234
fonte
Essa pergunta está muito morta, mas estou adicionando um comentário porque recentemente me encontrei em uma situação que outras pessoas podem enfrentar. Eu precisava ocultar um elemento e mantê-looffsetTop e display:nonedefini-lo offsetTopcomo 0. Minha solução aqui foi usar, em visibility: hiddenseguida, defina a largura e a altura como 0. Depois que precisei tornar o elemento visível novamente, removi os três atributos usando Javascript. Um pouco de uma solução hacky, mas funciona bem em praticamente todos os casos de uso.
rappatic

Respostas:

302

Tente definir display:nonepara ocultar e defina display:blockpara mostrar.

Huusom
fonte
não é possível remover o elemento do dom man. usando esta opção também. leia a pergunta
Pranay Rana
26
nem todos os itens devem ser display: block, alguns terão que ser definidos como display: inline(como <span>ou <a>ou <img>elementos DOM).
Mauro
2
@ pranay a pergunta diz para escondê-los para não removê-los do DOM.
Mauro
6
@ pranay: A questão não está muito bem expressa, mas Huusom está resolvendo o problema que o usuário está tendo.
Claudio Redi 28/05
1
Uma melhoria: crie uma classe CSS chamada hiddenwith display: none. Adicione a classe a um elemento para ocultá-lo, remova-o show. Ao removê-lo, a displaypropriedade é restaurada para o elemento padrão.
Alejandro C De Baca
44

use o estilo como

<div style="display:none;"></div>
Salil
fonte
1
Infelizmente, isso não funciona para mim - usando o display: none ainda deixa um espaço em branco.
mbuc91 19/05/19
15

Usar display:noneé uma boa opção apenas para remover um elemento, mas também será removido para os leitores de tela . Também há discussões se isso afeta o SEO. Há um artigo curto e bom sobre esse tópico em A List Apart

Se você realmente quer apenas ocultar e não remover um elemento, use melhor:

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

Assim, também pode ser lido pelos leitores de tela.

A única desvantagem desse método é que esse DIV é realmente renderizado e pode afetar o desempenho , especialmente em telefones celulares.

alboth - undkonsorten.com
fonte
2
se você optar por posicionar algo absoluto com o qual possa executar visibility: hidden;, na maioria dos casos , digamos que você tenha outros elementos absolutos que não terão conflito pelo espaço, apenas conflito de z-index. Apenas por esconder um elemento com o qual eu iriavisibility
Dejan.S
10

Olha, em vez de usar visibility: hidden;use display: none;. A primeira opção oculta, mas ainda ocupa espaço, e a segunda opção oculta e não ocupa espaço.

Alejandro Nava
fonte
6

A resposta a esta pergunta é dizer para usar display: none e display: block, mas isso não ajuda a alguém que está tentando usar transições css para mostrar e ocultar conteúdo usando a propriedade de visibilidade.

Isso também me deixou louco, porque o uso do display mata qualquer transição de css.

Uma solução é adicionar isso à classe que está usando visibilidade: 

overflow:hidden

Para que isso funcione, depende do layout, mas deve manter o conteúdo vazio na div em que reside.

Omar
fonte
3
Se você jogar com visibility: hidden e visibilidade: visível e definir a sua posição de elemento: fixo você não terá esse problema, é como mágica
John Balvin Arias
6

display: nenhum é solução, isso esconde completamente os elementos com seu espaço.

História sobre display:noneevisibility: hidden

visibility:hidden significa que a tag não está visível, mas há espaço alocado para ela na página.

display:nonesignifica ocultar completamente elementos com seu espaço. (embora você ainda possa interagir com ele através do DOM)

Hidayt Rahman
fonte
3

display:noneocultar e definir display:blockpara mostrar.

Pranay Rana
fonte
1
Ele pergunta sobre removê-lo visualmente, "como se eles não estivessem no DOM". Não se trata de removê-los do DOM real.
Arve Systad
A pergunta afirma não removê-los do DOM apenas para fazê-los desaparecer. as though they are not in the DOM at all (but without actually removing them from the DOM)
Mauro
@pranay: visibility: hiddeninterrompe a exibição do conteúdo, mas ainda usa espaço vertical / horizontal; display: none remove o espaço vertical / horizontal do elemento.
Mauro
Não, não faz. visibilidade: oculto; torna o elemento invisível, mas ainda ocupa espaço. Mostrar nenhum; faz o documento se comportar como se nunca estivesse lá.
Olly Hodgson 28/05
1
Exclua esta resposta então.
BalusC
3

A alternância displaynão permite transições CSS suaves. Em vez disso, alterne o visibilitye o max-height.

visibility: hidden;
max-height: 0;
Ahmad
fonte
Isso é útil quando você trabalha com animações. Porque estamos escondendo o elemento fora da área visível usando algo parecido transform: translateX(-100%). Nós não queremosdisplay: none
zhuhang.jasper
2

aqui está uma opinião diferente sobre como colocá-los de volta após a exibição: nenhum. não use display: block / inline etc. Em vez disso (se estiver usando javascript), defina css property display como '' (ou seja, em branco)

Anurag Priyadarshi
fonte
1 
$('#abc').css({"display":"none"});

isso oculta o conteúdo e também não deixa espaço vazio.

SanH
fonte
1

acima do meu conhecimento, é possível de 4 maneiras

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

display: nenhum é o melhor para evitar ocupar espaço em branco na página

Gil
fonte
2
Parece ser apenas uma repetição das outras respostas.
Pang
0

Use !importantse você for forçado a substituir estilos CSS existentes.

display: none !important;
jschnasse
fonte