Propriedade Visibility
Última atualização: 2026-09-13
visibility Propriedade Visibility
A propriedade visibility controla se um elemento é visível. Sua principal diferença de display:none é que hidden ainda ocupa espaço no layout; o elemento simplesmente não é renderizado visualmente. O valor padrão, visible, mostra o elemento normalmente. A propriedade é herdada e é frequentemente usada para esconder elementos mantendo seu espaço.
| Categoria | |
|---|---|
| Valor Inicial | visible |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
visibility: visible | hidden | collapse;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
visible | hidden | collapse | Palavra-chave | Controla se o elemento é visível (hidden ainda ocupa espaço). |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| visibility | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Um elemento visibility:hidden ainda ocupa espaço; display:none o remove do layout inteiramente.
❓ Perguntas Frequentes
QQual é a diferença entre visibility:hidden e display:none?
Avisibility:hidden torna um elemento invisível mantendo seu espaço original no layout; ele permanece no fluxo do documento e ainda é lido por leitores de tela. display:none remove o elemento do fluxo inteiramente, não ocupa espaço e o esconde dos leitores de tela. Use visibility:hidden para esconder preservando o espaço, por exemplo ao medir um layout ou aguardar conteúdo, e display:none para remover um elemento completamente.
QQual é a diferença entre visibility:hidden e opacity:0?
AAmbos escondem um elemento visualmente mantendo seu espaço, mas opacity:0 ainda permite cliques e eventos e suporta transições suaves, enquanto visibility:hidden para de responder a eventos do mouse, então os cliques passam através, e tem suporte de transição limitado. opacity também cria um novo contexto de empilhamento, enquanto visibility não afeta o layout dos filhos, e os filhos podem ser restaurados individualmente com visibility:visible. Escolha opacity para esmaecimentos, visibility para remoção real de interação.
QA visibility é herdada?
ASim. visibility é uma das poucas propriedades CSS herdadas: quando um pai é definido como hidden, seus filhos são ocultos por padrão, mas um filho pode se forçar visível com visibility:visible. Isso é útil para submenus e painéis expansíveis, onde você esconde o contêiner pai e então revela os filhos no hover sem tocar no estilo do próprio pai, mantendo a implementação simples e autocontida.
QA visibility pode ser transitada?
Avisibility é uma propriedade discreta, então as transições geralmente mudam bruscamente em vez de esmaecer. Um truque comum é fazer a transição junto com opacity: esmaecer opacity de 0 a 1 enquanto alterna visibility no final da animação. Isso produz efeitos limpos de fade-in e fade-out e é frequentemente usado para modais, tooltips e animações similares de mostrar/esconder, dando o mesmo acabamento das transições só de opacity enquanto mantém o elemento não interativo enquanto oculto.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade display
Controle se um elemento é exibido e seu tipo de exibição.
Propriedade opacity
Controle a transparência de um elemento.
