No HTML temos dois tipos de caixas: caixas em bloco (block) e caixas em linha (inline).
Os elementos em bloco, em que se incluem cabeçalhos e parágrafos (tal como este) seguem-se uns aos outros verticalmente.
Os elementos em linha já se seguem uns aos outros na mesma linha. São disto exemplo os links ou os spans, que não quebraram esta linha apesar de serem elementos distintos dentro do parágrafo.
Com CSS, podemos transformar blocos em linhas. Os elementos de uma lista, por exemplo, são caixas em bloco: seguem-se uma à outra verticalmente, e não na mesma linha.
Mas se mudarmos os itens da lista para caixas em linha, dá para ver a diferença.
Casos como este dão jeito quando queremos mostrar vários elementos em sequência, por exemplo uma lista de tags.
A magia está na propriedade display, que vamos
explorar mais noutros exemplos.
Podes ler mais pormenores interessantes sobre este assunto na documentação da MDN: uma introdução ao fluxo da página, e uma explicação mais a fundo de como funcionam as caixas.