EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Display e Visibility CSS

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

Valores de Display

block

Elementos de bloco ocupam uma linha inteira, empilhando verticalmente:

Exemplo

HTML 
<style>
.block {
  display: block;
  width: 200px;
  background: #e3f2fd;
  padding: 10px;
  margin: 5px 0;
}
</style>
<div class="block">Elemento de bloco 1</div>
<div class="block">Elemento de bloco 2</div>
▶ Experimente

inline

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

Exemplo

HTML 
<style>
.inline {
  display: inline;
  background: #fce4ec;
  padding: 5px;
}
</style>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<span class="inline">Inline 3</span>
▶ Experimente

inline-block

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

Exemplo

HTML 
<style>
.inline-block {
  display: inline-block;
  width: 150px;
  height: 80px;
  background: #e8f5e9;
  margin: 5px;
  text-align: center;
  line-height: 80px;
}
</style>
<div class="inline-block">Caixa 1</div>
<div class="inline-block">Caixa 2</div>
<div class="inline-block">Caixa 3</div>
▶ Experimente

Visibility e Opacity

visibility: hidden vs display: none

Exemplo

HTML 
<style>
.hidden {
  visibility: hidden;
  background: #ffebee;
  padding: 10px;
}
.none {
  display: none;
}
.visible {
  background: #e8f5e9;
  padding: 10px;
}
</style>
<div class="visible">Elemento visível</div>
<div class="hidden">Oculto mas ainda ocupa espaço</div>
<div class="visible">Este elemento permanece no lugar</div>
▶ Experimente

opacity

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

Exemplo

HTML 
<style>
.semi-transparent {
  opacity: 0.5;
  background: #2196f3;
  color: white;
  padding: 20px;
}
</style>
<div class="semi-transparent">50% transparente (todo o conteúdo afetado)</div>
▶ Experimente

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 ❌ ❌ ✅ ❌

❓ Perguntas Frequentes

Q 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.
Q 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.
Q 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

📝 Exercícios

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