Propriedade CSS visibility
A propriedade CSS visibility define se o elemento é visível ou oculto. Veja exemplos e experimente você mesmo.
A propriedade CSS visibility controla se um elemento é exibido ou ocultado sem alterar o layout — um elemento oculto mantém exatamente o espaço que ocuparia se estivesse visível. Esta página aborda os três valores principais (visible, hidden, collapse), como visibility difere de display e opacity, as implicações de acessibilidade ao ocultar conteúdo e exemplos executáveis para cada valor.
O que a visibility faz
O valor mais utilizado é hidden. Ao definir visibility: hidden, o elemento se torna invisível, mas ainda ocupa seu espaço no layout — o conteúdo ao redor não se move para preencher a lacuna. O elemento também é removido da ordem de tabulação e não é anunciado pelos leitores de tela, portanto está genuinamente oculto para as tecnologias assistivas, não apenas visualmente.
Uma característica incomum: visibility é herdada, mas um elemento filho pode substituí-la. Se um elemento pai tiver visibility: hidden, um descendente com visibility: visible reaparecerá mesmo que seu ancestral esteja oculto.
O valor collapse tem tratamento especial para elementos relacionados a tabelas (<tr>, <col>, grupos de linhas, grupos de colunas). Nesses elementos, ele remove a linha ou coluna inteiramente — da forma como display: none faria — fazendo o restante da tabela refluar para fechar a lacuna, mas as larguras das colunas da tabela permanecem calculadas como se a linha ainda estivesse lá. Em elementos que não são de tabela, collapse se comporta simplesmente como hidden.
O suporte dos navegadores para collapse em elementos de tabela é inconsistente: alguns motores o renderizam de forma idêntica ao hidden (a linha mantém seu espaço visível). Se você precisar que uma linha desapareça de verdade em todos os navegadores, use display: none no <tr> em vez disso.
visibility vs. display vs. opacity
Essas três propriedades todas "ocultam" um elemento, mas se comportam de forma diferente — escolher a errada é um erro comum.
| Propriedade | Mantém o espaço do layout? | Na árvore de acessibilidade? | Recebe eventos? |
|---|---|---|---|
visibility: hidden | Sim | Não | Não |
display: none | Não (colapsa) | Não | Não |
opacity: 0 | Sim | Sim | Sim |
Use visibility: hidden quando quiser reservar o espaço do elemento, mas ocultar seu conteúdo (por exemplo, alternando um espaço reservado sem que a página salte). Use display: none quando quiser que o elemento desapareça e o layout se feche. Use opacity: 0 somente quando quiser um elemento ainda interativo e ainda legível por leitores de tela — por exemplo, um elemento que você está exibindo ou ocultando com fade.
Como visibility é animável, você pode combiná-la com opacity para um fade-out que termina em um elemento completamente oculto e não interativo:
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.fade.is-hidden {
opacity: 0;
visibility: hidden;
}| Valor inicial | visible |
|---|---|
| Aplica-se a | Todos os elementos (collapse aplica-se apenas a elementos relacionados a tabelas). |
| Herdada | Sim. |
| Animável | Sim. |
| Versão | CSS2 |
| Sintaxe DOM | Object.style.visibility = "collapse"; |
Sintaxe
Sintaxe da propriedade CSS visibility
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Exemplo da propriedade visibility com o valor "hidden":
Exemplo da propriedade CSS visibility com o valor hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Resultado
Exemplo da propriedade visibility com os valores "visible" e "hidden":
Exemplo da propriedade CSS visibility com os valores visible e hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Exemplo da propriedade visibility com o valor "collapse":
Exemplo da propriedade CSS visibility com o valor collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| visible | Neste caso, o elemento é visível. Este é o valor padrão desta propriedade. | Experimente » |
| hidden | Este valor apenas oculta visualmente os elementos. | Experimente » |
| collapse | Usado com elementos de tabela específicos (linhas, grupos de linhas, colunas, grupos de colunas) para remover linhas ou colunas inteiras. Este valor tem o mesmo significado que "hidden" quando usado com outros elementos. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. | |
| revert | Reverte a propriedade para seu valor herdado ou valor inicial, dependendo do que for aplicável. | Experimente » |
| revert-layer | Reverte a propriedade para o valor definido na camada anterior da cascata. | Experimente » |
Propriedades relacionadas
- CSS
display— oculta um elemento e remove seu espaço do layout. - CSS
opacity— torna um elemento transparente mantendo-o interativo. - CSS
overflow— controla o conteúdo que transborda para fora de sua caixa. - CSS
position— move elementos para fora do fluxo normal.