Preservando o layout da página enquanto oculta elementos

Ao tentar ocultar elementos HTML sem afetar o layout visual, o uso de visibilidade: oculto pode levar a resultados indesejados. Embora o elemento seja ocultado da visualização, ele continua ocupando o mesmo espaço na página.

Desativando a exibição

Para superar esse desafio, é recomendável empregar a propriedade display. Ao definir a exibição do elemento como nenhum, ele efetivamente desaparece da representação visual, como se tivesse sido totalmente removido do DOM.

Considere o seguinte exemplo:

Inicialmente, o elemento div é exibido normalmente. Para ocultá-lo:
#element {
  display: none;
}
Quando display: none é aplicado, o elemento fica visualmente ausente, liberando o espaço que ocupava anteriormente. Para restaurar a visibilidade do elemento:
#element {
  display: block;  
}
Benefícios de usar display: nenhum
Preserva o layout da página
Mantém a posição do elemento no código HTML
Permite que o elemento seja facilmente exibido novamente definindo display: block