Display: block, inline, inline-block e none

A propriedade display é uma das mais importantes do CSS. Ela define como a caixa do elemento se comporta no fluxo da página - e tem implicações enormes no layout.

block: a caixa ocupa a linha inteira

<p>Parágrafo 1</p>
<p>Parágrafo 2</p>

p { display: block; }

• Ocupa toda a largura disponível do elemento pai.
• Quebra linha antes e depois (próximo elemento vai pra baixo).
• Aceita width, height, margin (todos os lados), padding.
• Exemplos: <div>, <p>, <h1>, <section>, <ul>, <li>.

inline: a caixa se comporta como texto

<span>destaque</span> em um texto maior

span { display: inline; }

• Ocupa só o espaço do conteúdo (como uma palavra no meio do texto).
• Não quebra linha - outros elementos inline ficam do lado.
• Não aceita width nem height (altura e largura são definidas pelo conteúdo). margin-top e margin-bottom também não funcionam; margin-left e margin-right sim.
• Aceita padding (mas pode vazar pra fora da linha, cuidado).
• Exemplos: <span>, <a>, <strong>, <em>, <img> (imagens são inline por padrão, mas viram block fácil com display: block).

inline-block: o melhor dos dois mundos

.botao { display: inline-block; }

• Fica do lado de outros elementos (como inline), mas aceita width, height, margin e padding nos quatro lados (como block).
• É o que você usa quando quer "vários botões na mesma linha, todos do mesmo tamanho".

none: o elemento some (e some de verdade)

.escondido { display: none; }

• O elemento não é renderizado e não ocupa espaço. Diferente de visibility: hidden, que esconde visualmente mas mantém o espaço.
• Útil para modais, menus mobile, conteúdo condicional.

Quando o display default te trai

Um caso clássico: imagem dentro de um link, com um espacinho de 4px embaixo que ninguém pediu. Isso é porque <img> é inline por padrão e a linha "reserva" espaço para letras com descendente (g, j, p, q, y). Solução: img { display: block; }. Esse é o tipo de gotinha que devtools mostra claramente.

A saga do display: flex e display: grid

.container { display: flex; }
.container { display: grid; }

Essas duas merecem capítulos próprios - e merecem. Veremos Flexbox no nível intermediário e Grid no avançado. Spoiler: é aí que o CSS fica divertido de verdade.

• block: linha inteira, aceita tudo.
• inline: se comporta como texto, sem width/height.
• inline-block: lado a lado e aceita width/height.
• none: some, nem ocupa espaço.
• flex / grid: layouts - vêm depois.

Dica: na dúvida do display padrão de uma tag, inspecione no navegador (próximo nó). A maioria das tags tem um display "esperado": <p>, <div>, <section> são block; <span>, <a>, <em> são inline. Saber isso já evita 80% das surpresas.

No próximo nó, vamos falar de unidades - porque 16px não é a única forma de dizer "esse tamanho".