Vamos ver o que o MDN tem a dizer sobre as propriedades CSS em questão

Do MDN para exibição: nenhum

Usar um valor de exibição none em um elemento o removerá da árvore de acessibilidade. Isso fará com que o elemento e todos os seus elementos descendentes não sejam mais anunciados pela tecnologia de leitura de tela.

Isso significa que o elemento não será exibido, mas o layout não será afetado.

MDN para visibilidade: oculto

A caixa de elemento é invisível (não desenhada), mas ainda afeta o layout normalmente. Descendentes do elemento serão visíveis se eles tiverem visibilidade definida como visível. O elemento não pode receber o foco (como ao navegar pelos índices da guia).

Este afeta o layout

Considere o exemplo abaixo:

A saída se parece abaixo:

Você pode ver que as páginas 2 e 3 não estão sendo exibidas no navegador e que há uma linha vazia. A linha vazia corresponde ao elemento com style = "visible: hidden;" O elemento com style = "display: none;" nem sequer ocupa espaço.

Nota:

Agora, algumas pessoas mencionaram que o elemento com display: none será removido da Árvore DOM. Isso certamente não está correto. Você pode verificar explicitamente isso como abaixo:

Existe algo chamado “árvore de acessibilidade”, do qual os resultados são removidos para “display: none” e “visibilidade: hidden”.