Diferenças entre visibility:hidden e display:none

Olá galera, nesse post vamos falar quais as diferenças entre visibility:hidden e display:none, pois eu vejo que muitos sites as pessoas usam sem saber qual devemos usar, pois aparentemente, são semelhantes no resultado que apresenta na tela,  mais existe uma pequena diferença que acaba influenciando no desenvolvimento de nossa página.

Aparentemente a mesma função, “esconder” objetos em uma página, mas com uma única diferença, quando utilizamos visibility:hidden em uma div por exemplo, ela ficará oculta em nossa página, mas o espaço por ela ocupado ainda ficará alí na página, ao contrário de display:none, quando usado além de esconder o objeto, ele some com o espaço ocupado pela mesma também.

Para entender melhor, vou colocar um exemplo abaixo, e vocês podem testar para entender completamente.

Primeiramente o CSS:

div {
    border:1px solid #000;
}
.visibility {
    visibility:hidden;
}
.display {
    display:none;
}

Em seguida o HTML:

<div>1 : Caracterizada como uma div normal</div>
<div class="visibility">2 : Essa div utiliza visibility:hidden</div>
<div>3 : Caracterizada como uma div normal</div>
<div class="display">4 : Essa div utiliza display:none</div>
<div>5 : Caracterizada como uma div normal</div>

Fazendo isso, salve seu arquivo e veja que a div 2 e a div 4, não está aparecendo mas a div 2 está com seu espaço ocupado, pois existe o elemento, mas só está invisível, enquanto a div 4 não apareceu e está oculta e tendo seu espaço ocultado pela div 5.

Acho que agora ficou bem detalhado a diferença, espero ter ajudado, até o próximo post.