Carregando...

Block e inline em HTML

Depois das tabelas, veja o fluxo da página: cada elemento tem um hábito display por omissão. Duas famílias: block e inline.

O que significa fluxo aqui

A ordem de empacotamento por omissão sem CSS de layout. O parágrafo é block; a ligação continua inline.

Resposta direta

Block: p, div, títulos, listas, table. Inline: a, strong, em, span, code. Memorize os defaults primeiro.

📊 Common defaults

Category	Examples	Flow habit
Block	p, div, h1–h6, ul, ol, section, table	New line, full available width (typical)
Inline	a, strong, em, span, code	Continues inside the text line

Caixas block com peças inline

Um p contém; a/strong ficam na linha. Um div seguinte abre outro bloco.

Block paragraph with inline pieces

html

HTML Code

<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

Leitura do exemplo de parágrafo

p possui a caixa
a e strong na linha
div abaixo é outro block

`div` versus `span`

div é block por omissão; span é inline. Frases curtas → span.

div versus span contrast

html

HTML Code

<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

Leitura div/span

span na linha
div na sua própria fila block

CSS pode mudar display depois

Aprenda defaults para reconhecer overrides.

Prática

Dois p empilhados
Dois a num parágrafo
Comparar span e div
strong sem forçar linha nova
Anotar três tags por categoria

Erros fáceis

div para cada frase pequena
esperar linha nova de strong
esquecer override CSS

Resumo

Block ≈ nova linha
Inline ≈ dentro da linha
span para ganchos curtos
CSS depois

🧠 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

❓

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

Idioma