7 de dezembro de 2007

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:

1 comentários:

Wanderson Gomes disse...

Simples! E muito bacana! Valeu!