Diferenças entre visibility e display – CSS

Diferenças e como usar as propriedades Visibility ou Hidden no CSS para seu propósito específico

Publicado

Quando mostramos um elemento na página, podemos escolher por esconder ele por algum motivo.

Basicamente temos duas opções, podemos eliminar esse elemento ou somente esconder (e manter seu espaço).

Vamos ao exemplo abaixo:

Como funciona o display:block - Dicas CSS
Como funciona o display:block – Dicas CSS

Essas 3 divs acima, cada uma representada com sua classe, podemos definir a visualização como block.

Nesse caso, ela é um bloco, entende-se que cada uma delas é um bloco.

Aí temos a primeira opção:

Como funciona o display:none - Dicas CSS
Como funciona o display:none – Dicas CSS

O display: none, faz com que o elemento não seja mostrado e seu espaço não fique reservado, fazendo um efeito cascata da direita para a esquerda.

No segundo exemplo abaixo, temos:

Como funciona o visibility:hidden - Dicas CSS
Como funciona o visibility:hidden – Dicas CSS

O visibility:hidden por sua vez, faz o elemento não aparecer, mas reserva seu espaço.

Cada um tem um uso específico, podendo ser útil em uma situação ou outra.

Fique ligado aqui no blog para mais dicas de CSS e outros assuntos

  Display Flex para iniciantes

CSS, Hidden, Visibility

Apoio

Participe da campanha!

Cafézinho

Quer me pagar um café? Pode usar a chave PIX abaixo

Chave PIX e-mail

[email protected]

Vídeos

Assista e se inscreva em nosso canal!

NEWSLETTER

Cadastre-se gratuitamente e fique por dentro de todas as novidades do blog, como dicas e tutoriais.

Não enviamos spams, fique tranquilo

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.