Elementos inline e de bloco

Elementos HTML podem ser classificadas como sendo inline ou bloco.

A diferença entre os dois é uma das coisas mais básicas que você precisa saber para usar melhor o CSS.

As 3 maneiras que um elemento (x)HTML pode ser exibido

Todos os elementos, HTML ou XHTML, são naturalmente exibidos em uma das classificações abaixo.

Elementos de bloco

Usa toda largura disponível e cria uma linha antes e uma depois de si próprio.
display: block;

Elementos inline

Usa somente a largura necessária e não cria novas linhas
display: inline;

Elementos invisiveis

Algumas tas como <meta>, <link> e <style> não são visíveis.
display: none;

Exemplo de elementos de bloco

Tags como o <p> e o <div> são elementos de bloco.

Um elemento de bloco, é aquele que ocupa toda a largura da linha em que está, e cria uma linha antes e uma depois do local onde foi inserido.

Ficou curioso pra saber quais outros elementos são elementos de bloco? Consulte esta lista com todos eles!

Exemplo de elementos inline

Elementos inline não criam linhas, eles apenas se misturam com os elementos que estiverem perto deles. Se eu colocasse um <span> nesse texto você nem perceberia, pois não cria linhas.

Se você quer saber quais são os outros elementos inline consulte esta lista com os elementos inline do HTML 4.

Mudando o display de uma Tag

Com CSS você pode fazer um <em> virar um elemento de bloco e um <p> virar um elemento inline. Essa "mágica" é feita pela propriedade display.

Dica final

Tente mudar o display de alguns elementos, como <a> ou <li>, você pode conseguir efeitos interessantes.

Referencias:
CSS: Block and inline elements

Tags: CSS HTML