Carregando...

Display em CSS

display responde a uma pergunta calma: como esta caixa entra na página? Algumas empilham-se como blocos de largura total; outras sentam-se numa frase; algumas podem ser retiradas do layout por completo. Esta lição mapeia os valores do dia a dia — e deixa a prática profunda de inline-block para a sessão seguinte.

Um kit de display

📊 Display num olhar

Valor Trabalho do dia a dia
block Começa na própria linha; muitas vezes preenche a largura da fila
inline Vive na linha de texto; width/height costumam ser ignorados
inline-block Senta-se numa linha como texto, mas aceita width/height/padding como caixa
none Remove o elemento do layout (o espaço colapsa)
flex / grid Modos de layout poderosos — lições posteriores, não aqui

O HTML predefinido já escolhe display para muitas etiquetas (div é block, span é inline, button muitas vezes quase inline-block). O CSS deixa-o substituir quando o fluxo precisa de outro trabalho.

Block — linha própria, caixa espaçosa

Caixas block começam numa linha nova e tipicamente tomam a largura disponível. Títulos, parágrafos e divs comportam-se assim por predefinição.

Forçar block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — dentro da frase

Caixas inline sentam-se no fluxo do texto e quebram com as palavras. Definir width ou height num inline puro muitas vezes não serve — por isso se passa a block ou inline-block.

Forçar inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — uma vista curta

inline-block mantém vizinhos numa linha quando há espaço, mas ainda respeita width, height e padding. Vai praticá-lo com cuidado na próxima lição; aqui só reconheça o híbrido.

Vistazo a inline-block

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — saia do layout

display: none esconde o elemento e colapsa o seu espaço. O layout e muitas ajudas tratam-no como ausente. Prefira um interruptor de classe a regras espalhadas.

Esconder com none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden é outra história — a caixa ainda pode reservar espaço. Esta lição fica com display: none para remoção real do layout. Não aprofundamos visibility aqui.

Um hábito calmo de display

Mude display por razões de fluxo — não por cosmética de botões (lição anterior) nem como atalho de todo problema de layout (flex/grid depois). Nomeie estados intencionais com classes.

Classes mostrar e esconder

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Comparar três modos

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

Experimente você

  1. Force um span a display: block e dê-lhe width + padding.
  2. Force um div curto (ou título) a display: inline e veja-o numa frase.
  3. Adicione um .chip com inline-block — note que width/padding funcionam.
  4. Esconda um painel com .is-hidden { display: none; } e alterne a classe.
  5. Escreva uma frase: quando block e quando inline para um rótulo?

Erros comuns

  • Esperar que width / height funcionem em inline puro
  • Usar display: none quando só queria atenuar o aspeto — e esquecer que o espaço colapsa
  • Tratar esta lição como peles hover de botão (isso foi Buttons)
  • Despejar receitas Flexbox/Grid aqui em vez de aprender os quatro valores básicos
  • Confundir «escondido do layout» com a lição mais profunda de inline-block seguinte

Resumo

  • display controla como uma caixa entra no fluxo da página
  • block toma a própria linha; inline vive no texto
  • inline-block é o híbrido — prática a seguir
  • none remove o elemento e o seu espaço do layout
  • Mude display para trabalhos de fluxo; deixe layouts fancy para mais tarde

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 35 de 35
Css Tutorial