De acordo com as especificações do W3C, Visibility:hidden e Display:none tem “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. Ficou meio confuso? Vamos ver um exemplo:
Usaremos como exemplo o seguinte código CSS:
div {
border:1px solid #000;
}
.visibility {
visibility:hidden;
}
.display {
display:none;
}
E utilizar-mos o seguinte 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>
Agora, vejam um exemplo em funcionamento, se notarem, a div de nº 2, que utiliza visibility:hidden não aparece, mas seu espaço ocupado continua alí, e a div de nº 4, que utiliza display:none, também não aparece, e nem seu espaço ocupado. Vocês sabiam disso? Eu não, acabei descobrindo isso aqui.
