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:
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:
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:
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
Este artigo foi modificado em 13/06/2023 16:01