Qual é a diferença entre visible: hidden e display: none?

As regras CSS visibility:hiddene display:noneambas resultam no elemento não sendo visível. São sinônimos?

display:nonesignifica que a tag em questão não aparecerá na página (embora você ainda possa interagir com ela por meio do dom). Não haverá espaço alocado para ele entre as outras tags.

visibility:hiddensignifica que display:none, diferentemente , a tag não está visível, mas o espaço é alocado na página. A tag é renderizada, apenas não é vista na página.

Por exemplo:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Substituindo [style-tag-value]pordisplay:noneresultados em:

test |   | test

Substituindo [style-tag-value]pelos visibility:hiddenresultados em:

test |                        | test

Eles não são sinônimos.

display:none remove o elemento do fluxo normal da página, permitindo que outros elementos sejam preenchidos.

visibility:hidden deixa o elemento no fluxo normal da página, que ainda ocupa espaço.

Imagine que você está na fila para dar uma volta em um parque de diversões e alguém na fila fica tão turbulento que a segurança os tira da fila. Todos na fila avançarão uma posição para preencher o slot agora vazio. Isto é como display:none.

Compare isso com a situação semelhante, mas alguém na sua frente coloca uma capa de invisibilidade. Ao visualizar a linha, parecerá que há um espaço vazio, mas as pessoas não podem realmente preencher esse espaço vazio porque alguém ainda está lá. Isto é como visibility:hidden.

Uma coisa que vale a pena acrescentar, embora não tenha sido perguntada, é que existe uma terceira opção de tornar o objeto completamente transparente. Considerar:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Clique no botão "Executar trecho de código" acima para ver o resultado).

A diferença entre 1 e 2 já foi apontada (ou seja, 2 ainda ocupa espaço). No entanto, há uma diferença entre 2 e 3: no caso 3, o mouse ainda mudará para a mão ao passar o mouse sobre o link, e o usuário ainda poderá clicar no link e os eventos Javascript ainda serão acionados no link. Normalmente, esse não é o comportamento que você deseja (mas às vezes é?).

Outra diferença é que, se você selecionar o texto e copiar / colar como texto sem formatação, obterá o seguinte:

1st link.
2nd  link.
3rd unseen link.

No caso 3, o texto é copiado. Talvez isso seja útil para algum tipo de marca d'água ou se você deseja ocultar um aviso de direitos autorais que apareceria se um usuário descuidado copiar / colar seu conteúdo?

display:none remove o elemento do fluxo do layout.

visibility:hidden esconde, mas deixa o espaço.

Há uma grande diferença quando se trata de nós filhos. Por exemplo: Se você possui uma div pai e uma div filho aninhada. Então, se você escrever assim:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

Nesse caso, nenhuma das divs estará visível. Mas se você escrever assim:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

A div filho ficará visível, enquanto a div pai não será mostrada.

Eles não são sinônimos - display: noneremove o elemento do fluxo da página e o restante da página flui como se não estivesse lá.

visibility: hidden oculta o elemento da visualização, mas não o fluxo da página, deixando espaço para ele na página.

display: none remove o elemento completamente da página e a página é criada como se o elemento não estivesse lá.

Visibility: hidden deixa o espaço no fluxo do documento, mesmo que você não possa mais vê-lo.

Isso pode ou não fazer uma grande diferença, dependendo do que você está fazendo.

Com visibility:hiddeno objeto ainda ocupa a altura vertical na página. Com display:noneele é completamente removido. Se você tiver um texto abaixo de uma imagem e o fizer display:none, esse texto será alterado para preencher o espaço em que a imagem estava. Se você tiver visibilidade: oculto, o texto permanecerá no mesmo local.

display:noneocultará o elemento e reduzirá o espaço ocupado, enquanto visibility:hiddenocultará o elemento e preservará o espaço dos elementos. display: none também afeta algumas das propriedades disponíveis no javascript nas versões mais antigas do IE e Safari.

Além de todas as outras respostas, há uma diferença importante para o IE8: se você usar display:nonee tentar obter a largura ou a altura do elemento, o IE8 retornará 0 (enquanto outros navegadores retornarão os tamanhos reais). O IE8 retorna a largura ou altura correta apenas para visibility:hidden.

visibility:hiddenpreserva o espaço; display:nonenão.

display: none; 

Não estará disponível na página e não ocupa espaço.

visibility: hidden; 

oculta um elemento, mas ainda ocupa o mesmo espaço de antes. O elemento ficará oculto, mas ainda assim, afetará o layout.

visibility: hidden preservar o espaço, enquanto display: none não preserva o espaço.

Exibir nenhum exemplo: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Exemplo oculto de visibilidade: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Se a propriedade de visibilidade estiver definida como "hidden", o navegador ainda ocupará espaço na página para o conteúdo, mesmo que seja invisível.
Mas quando definimos um objeto "display:none", o navegador não aloca espaço na página para o seu conteúdo.

Exemplo:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Ver detalhes

visibility:hidden manterá o elemento na página e ocupará esse espaço, mas não será exibido ao usuário.

display:none não estará disponível na página e não ocupa espaço.

Uma outra diferença é que visibility:hiddenfunciona em navegadores muito, muito antigos e display:nonenão:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

A diferença vai além do estilo e reflete-se na forma como os elementos se comportam quando manipulados com JavaScript.

Efeitos e efeitos colaterais de display: none:

• o elemento de destino é retirado do fluxo de documentos (não afeta o layout de outros elementos);
• todos os descendentes são afetados (também não são exibidos e não podem "romper" com essa herança);
• medições não podem ser feitas para o elemento de destino nem para os seus descendentes - eles não são processados em tudo, assim a sua clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), todo o retorno 0s.

Efeitos e efeitos colaterais de visibility: hidden:

• o elemento alvo está oculto da vista, mas não é retirado do fluxo e afeta o layout, ocupando seu espaço normal;
• innerText(mas não innerHTML) do elemento de destino e descendentes retorna uma string vazia.

display:none;não exibirá o elemento nem alocará espaço para o elemento na página, enquanto visibility:hidden;não exibirá o elemento na página, mas alocará espaço na página. Podemos acessar o elemento no DOM nos dois casos. Para entendê-lo de uma maneira melhor, observe o seguinte código: display: none vs visible: hidden

Há muitas respostas detalhadas aqui, mas pensei em adicionar isso para abordar a acessibilidade, pois há implicações.

display: none; e visibility: hidden; pode não ser lido por todos os softwares de leitura de tela. Lembre-se do que os usuários com deficiência visual terão.

A pergunta também pergunta sobre sinônimos. text-indent: -9999px;é um outro que é aproximadamente equivalente. A diferença importante comtext-indent é que muitas vezes será lido pelos leitores de tela. Pode ser uma experiência um pouco ruim, pois os usuários ainda podem tabular para o link.

Para acessibilidade, o que eu vejo usado hoje é uma combinação de estilos para ocultar um elemento enquanto é visível para os leitores de tela.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Uma boa prática é criar um link "Pular para o conteúdo" para a âncora do corpo principal do conteúdo. Usuários com deficiência visual provavelmente não querem ouvir toda a sua árvore de navegação em todas as páginas. Faça o link visualmente oculto. Os usuários podem simplesmente clicar na guia para acessar o link.

Para mais informações sobre acessibilidade e conteúdo oculto, consulte:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/