Qual é a diferença entre elementos de bloco e inline?

Question

Accepted Answer

Cada elemento tem um comportamento **display** padrão que controla como ele flui no layout. - Elementos de **Bloco** começam em uma **nova linha** e ocupam a **largura total disponível**. Eles aceitam width/height e todas as margens/paddings. Exemplos: `

`, `

`, `
`, `
`. - Elementos Inline fluem dentro de uma linha, apenas tão largos quanto seu conteúdo, e ignoram width/height e margens superior/inferior. Exemplos: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Por que isso importa ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Definir `width`/`height` em um elemento inline não faz nada. A solução é alterar seu display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — o melhor dos dois mundos `inline-block` fica no fluxo de texto (lado a lado) e* respeita width/height/margens — perfeito para itens de navegação, badges ou botões dispostos em uma linha. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Por que isso importa Entender o display padrão explica por que seu `` não aceita uma altura, por que `
`s se empilham e quando mudar para `inline-block`, `flex` ou `grid`. É a base de como os elementos se organizam antes de você aplicar qualquer sistema de layout.