Propriedade Display
Última atualização: 2026-09-13
display Propriedade Display
A propriedade display define como um elemento é apresentado na página, se comporta como um elemento de nível de bloco, um elemento inline ou usa modelos de layout modernos como Flex ou Grid. É uma das propriedades mais fundamentais e poderosas no layout CSS, capaz de mudar o comportamento de quase qualquer elemento no fluxo do documento.
| Categoria | |
|---|---|
| Valor Inicial | inline |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
display: block | inline | inline-block | flex | grid | none | table | table-row | table-cell | contents | flow | flow-root | list-item;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
block | inline | inline-block | flex | grid | none | table | table-row | table-cell | Palavra-chave | Tipos de exibição predefinidos. |
contents | flow | flow-root | list-item | Palavra-chave | Outros tipos de exibição. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| display | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： display:none remove um elemento do fluxo do documento completamente, não ocupando espaço e tornando-o inacessível a leitores de tela. Se você só quer ocultá-lo visualmente mantendo seu espaço, use visibility:hidden.
Importante： Em elementos inline, width, height e margens superior/inferior não têm efeito. Se você precisa de layout horizontal com dimensões definíveis, use inline-block ou flex.
❓ Perguntas Frequentes
QQual é a diferença entre inline, inline-block e block?
Aelementos inline fluem horizontalmente, não aceitam width, height ou margens verticais e são dimensionados pelo conteúdo; o padding vertical afeta o visual mas não o layout. elementos block ocupam uma linha inteira e aceitam width, height e todas as margens. inline-block combina ambos: flui horizontalmente como inline enquanto aceita dimensões e margens como block. Use inline-block quando precisar de disposição horizontal com dimensionamento controlado.
QQuando devo usar display:flex em vez de display:grid?
Aflex é para layouts unidimensionais com um único eixo principal, como barras de navegação, listas, centralização e linhas de duas colunas; os filhos se alinham ao longo do eixo com alinhamento e flexibilidade automáticos. grid é para layouts bidimensionais onde linhas e colunas são controladas juntas, como esqueletos de página inteira, grades de cartões e alinhamentos complexos. Uma regra simples: uma linha ou coluna significa flex; um padrão de grade significa grid.
QQual é a diferença entre display:none e visibility:hidden?
Adisplay:none remove um elemento e sua subárvore da renderização inteiramente, não ocupando espaço, não sendo lido por leitores de tela e não sendo interativo. visibility:hidden apenas o oculta visualmente; mantém seu espaço e ainda é lido por leitores de tela. Os ouvintes de eventos JavaScript em um elemento display:none ainda existem mas nunca disparam. Para efeitos de mostrar e ocultar com transição, a combinação de visibility com opacity é mais adequada.
QPor que width não funciona em elementos inline?
APorque elementos inline como span e a não geram caixas de linha, então o navegador ignora seu width, height e margens verticais. Para deixar um elemento inline aceitar dimensões, mude-o para display:inline-block ou block, ou coloque-o em um contêiner flex ou grid, onde se torna um item flex ou grid e width passa a valer. Isso também permite que o padding vertical empurre o layout ao redor, o que o inline comum nunca faz.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Layout Flexbox
Aprenda layout unidimensional com flex.
Layout Grid
Aprenda layout bidimensional com grid.
