Qual a diferença entre display:none e visibility:hidden?

A diferença entre display: none e visibility: hidden está relacionada à forma como os elementos HTML são renderizados na página.

Quando usamos display: none, o elemento é removido totalmente da estrutura da página. Isso significa que o elemento não ocupa espaço na página e todos os elementos que o seguem são reposicionados para preencher o espaço vazio. O elemento não é renderizado e não pode ser acessado pelos usuários.

Por exemplo, considere um menu de navegação que você deseja ocultar em dispositivos móveis. Você pode usar display: none para remover completamente o menu da visualização da página, permitindo que o conteúdo principal seja realocado e se ajuste corretamente aos dispositivos menores.

Por outro lado, quando usamos visibility: hidden, o elemento continua ocupando espaço na página, mas torna-se invisível. Isso significa que o espaço ocupado pelo elemento ainda é mantido na estrutura da página, mesmo que não seja visível para os usuários. Os elementos seguintes podem não ser reposicionados e permanecerão nos seus lugares originais.

Por exemplo, se você tiver uma imagem que deseje ocultar temporariamente, mas manter o espaço que ela ocupava, você pode usar visibility: hidden. Dessa forma, o espaço em branco da imagem ainda será preservado, mas o usuário não a verá.

Em resumo, display: none remove completamente o elemento da estrutura da página, enquanto visibility: hidden mantém o elemento invisível, mas ainda ocupando espaço. A escolha entre um e outro depende do efeito desejado e do comportamento que você planeja para seu layout.