Prof. Leon Blog

Appearance

Exemplos: Display CSS ​

← Voltar para a aula

display: block ​

Elementos block ocupam toda a largura disponível e sempre começam em uma nova linha. Você pode definir width, height, margin e padding em todas as direções.

Elemento block: ocupa tudo
Outro elemento block
width: 50%
css
div { display: block; } /* padrão para div, p, h1-h6 … */

display: inline ​

Elementos inline ficam na mesma linha que o conteúdo ao redor. Eles só ocupam o espaço do conteúdo. Não aceitam width e height. As margens verticais são ignoradas.

Texto comum inline A mais texto inline B e mais texto inline C

width e height são ignorados em elementos inline:

width:200px e height:60px não funcionam aqui (inline)
css
span { display: inline; } /* padrão para span, a, strong … */

/* width e height são ignorados! */
span { width: 200px; height: 60px; } /* sem efeito */

display: inline-block ​

Comporta-se como inline no fluxo (fica na mesma linha), mas aceita width, height, padding e margin verticais como um elemento block.

inline-blockinline-blockinline-block
width:160 height:70inline-block
css
.botao {
  display: inline-block;
  width: 160px;      /* agora funciona! */
  height: 40px;
  padding: 8px 16px;
  text-align: center;
}

display: none × visibility: hidden ​

Ambos ocultam o elemento, mas de formas diferentes:

  • display: none: remove o elemento do fluxo; não ocupa espaço.
  • visibility: hidden: oculta visualmente, mas mantém o espaço no layout.
Visível
display: none (sumiu!)
Após none
Visível
visibility: hidden (espaço mantido)
Após hidden
css
.oculto-none { display: none; }      /* sem espaço no layout */
.oculto-vis  { visibility: hidden; } /* espaço mantido */

Caso prático: lista de navegação ​

Transformando o <ul> de block → inline → inline-block:

block (padrão)

  • Home
  • Sobre
  • Portfólio
  • Contato

inline

  • Home
  • Sobre
  • Portfólio
  • Contato

inline-block (com hover, padding vertical)

  • Home
  • Sobre
  • Portfólio
  • Contato

Botões: block vs inline-block ​

block: ocupa toda a largura

Botão block

inline-block: lado a lado

SalvarPublicarCancelar

Interativo: mostrar / ocultar com display: none ​

Este elemento está visível. Clique no botão para ocultar com display: none!

Outros valores de display ​

flexAtiva o Flexbox. Filhos se tornam flex items.
gridAtiva o Grid Layout. Filhos se tornam grid items.
inline-flexComo flex, mas o container é inline.
tableSimula comportamento de tabela HTML.
contentsO container desaparece; filhos sobem para o pai.

Resumo rápido

block → nova linha, aceita tudo.
inline → na linha, não aceita width/height.
inline-block → na linha + aceita width/height.
none → invisível e sem espaço.
flex / grid → modelos de layout modernos.