CSS: Display e Visibility CSS

Última atualização: 2026-10-13

A propriedade display é uma das mais importantes propriedades CSS, controlando como os elementos são renderizados e dispostos na página.

Referência Rápida da Propriedade Display

Valor	Comportamento	Largura/Altura	Elementos Típicos
`block`	Nova linha, largura total	Aceita	`div`, `p`, `h1-h6`
`inline`	Mesma linha, largura do conteúdo	Ignora	`span`, `a`, `em`
`inline-block`	Mesma linha, aceita dimensões	Aceita	`button`, `input`
`flex`	Contêiner flex	—	Contêineres de layout
`grid`	Contêiner grid	—	Contêineres de layout
`none`	Completamente oculto	—	Qualquer elemento

Propriedades nesta seção: display flex grid

1. Valores de Display

(1) block

Elementos de bloco ocupam uma linha inteira, empilhando verticalmente:

▶ Exemplo

▶ Experimente

(2) inline

Elementos inline permanecem na mesma linha, ocupando apenas largura do conteúdo:

▶ Exemplo

▶ Experimente

(3) inline-block

Combina posicionamento inline com dimensões de nível bloco:

▶ Exemplo

▶ Experimente

2. Visibility e Opacity

(1) visibility: hidden vs display: none

▶ Exemplo

▶ Experimente

(2) opacity

Controla a transparência do elemento (0-1), afetando todo o conteúdo incluindo filhos:

▶ Exemplo

▶ Experimente

3. Comparação de Métodos de Ocultação de Elementos

Método	Ocupa Espaço	Visível	Interativo	Animação
`display: none`	❌	❌	❌	❌
`visibility: hidden`	✅	❌	❌	✅
`opacity: 0`	✅	✅	✅	✅
`position: absolute; left: -9999px`	❌	❌	✅	❌

Propriedades nesta seção: display flex grid

❓ Perguntas Frequentes

P Qual é a diferença entre display: none e visibility: hidden?

R display: none remove o elemento completamente — nenhum espaço ocupado, elementos ao redor preenchem a lacuna. visibility: hidden apenas esconde o visual — o elemento ainda ocupa espaço. Para transições de animação, opacity: 0 com transition é mais suave.

P Como remover lacunas entre elementos inline-block?

R A lacuna de 4px entre elementos inline-block vem do espaço em branco HTML (quebras de linha e espaços). Soluções: definir font-size: 0 no pai depois resetar nos filhos, ou escrever tags na mesma linha sem quebras.

P opacity: 0 vs visibility: hidden — qual tem melhor desempenho?

R Elementos com opacity: 0 ainda podem acionar eventos de clique, visibility: hidden não. Desempenho é similar, mas opacity suporta animações de transição para mostrar/esconder suave, visibility não pode transicionar.

📖 Resumo

display é a propriedade central de layout
Entender as diferenças entre block, inline, inline-block ajuda a controlar o arranjo de elementos
display: none e visibility: hidden ambos ocultam elementos, mas um ocupa espaço e o outro não — casos de uso diferentes
Em layouts modernos, display: flex e display: grid são as ferramentas de layout mais poderosas

📝 Exercícios

Crie uma página com caixas block, inline e inline-block para observar diferenças de arranjo e tamanho.
Defina links de navegação como inline-block com largura, altura e preenchimento para criar uma barra de navegação horizontal.
Demonstre a diferença entre display: none e visibility: hidden.
Crie um "grupo de botões" usando display: inline-block, tratando o problema de lacuna de espaço em branco.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós