DIFERENÇAS ENTRE VISIBILITY:HIDDEN E DISPLAY:NONE

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:

1 : Caracterizada como uma div normal
2 : Essa div utiliza visibility:hidden
3 : Caracterizada como uma div normal
4 : Essa div utiliza display:none
5 : Caracterizada como uma div normal

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.

Autor: Pedro Rogério
Fonte: http://www.pinceladasdaweb.com.br/

Um comentário sobre “DIFERENÇAS ENTRE VISIBILITY:HIDDEN E DISPLAY:NONE

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s