display e o fluxo normal

O fluxo normal

Finalmente você começa a colocar as coisas exatamente onde quer. Mas antes de posicionar qualquer coisa, vale entender o que o navegador faz por conta própria: ele coloca cada caixa seguindo o fluxo normal, de cima para baixo e, dentro de uma linha, da esquerda para a direita. A propriedade display decide como cada elemento participa desse fluxo. Domine isso e quebrar o fluxo de propósito (logo mais) deixa de ser um mistério.

display: block

Um elemento de bloco ocupa toda a largura disponível e começa em uma linha nova, como um parágrafo que reivindica sua própria linha. Respeita width, height e os quatro lados de margin e padding. São <div>, <p>, <h1>, <section>...

.bloco {
  display: block;
  width: 200px;
  height: 60px;
}

display: inline

Um elemento em linha flui dentro do texto, um após o outro e sem quebras de linha, como as palavras de uma frase. Ignora width e height e só aplica margin/padding horizontais de forma confiável. São <span>, <a>, <strong>...

.emlinha {
  display: inline;
  /* width e height aqui NÃO têm efeito */
}

display: inline-block

O meio-termo, o melhor dos dois mundos: o elemento flui em linha (não quebra a linha) mas respeita sim width, height e todas as margens/paddings. Perfeito para botões ou etiquetas que precisam de tamanho próprio sem abrir mão do seu lugar na mesma linha.

.etiqueta {
  display: inline-block;
  width: 80px;
  padding: 6px 10px;
}

display: none

display: none remove o elemento do fluxo: não é desenhado e não ocupa espaço, como se nunca tivesse estado ali. Cuidado, porque é diferente de visibility: hidden, que o esconde mas reserva seu espaço (deixa o vão vazio).

Regra prática: block empilha, inline flui no texto, inline-block flui mas com tamanho, e none desaparece sem deixar rastro.

Exemplos

Três etiquetas em linha, mas com tamanho próprio

<style>
.etiqueta {
  display: inline-block;
  width: 70px;
  padding: 6px;
  background: #ddd6fe;
  text-align: center;
}
</style>
<span class="etiqueta">Um</span>
<span class="etiqueta">Dois</span>
<span class="etiqueta">Três</span>