Elementos block e inline em CSS

Nível: iniciante

Neste tutorial vou explicar a diferença entre elementos block (em bloco) e inline (na mesma linha). Vários tutoriais deste blog podem depender de saber esses conceitos de HTML. Na verdade, eu estava preparando outros tutoriais quando percebi que eles exigiam esse conhecimento, então resolvi publicar este primeiro.

Pela tradução dos termos você já pode ter uma noção, mas vamos às definições:

Block

Um elemento block (em bloco) gera, automaticamente (sem precisar da tag <br>) uma quebra de linha antes e outra quebra depois do elemento.

Inline

Um elemento inline (na mesma linha) não gera quebra de linha e é exibido no mesmo bloco no qual está inserido.

None

Em HTML existem vários elementos que não são exibidos, não sendo block nem inline.

Com CSS você pode forçar um elemento que é block (por padrão) a aparecer como inline e vice-versa. Também é possível forçar elementos invísiveis. Porém é importante saber a visualização padrão de cada tag ou, pelo menos, ter uma lista para poder consultar.

Elementos block

<div>

Tag genérica para gerar blocos.

<address>

Tag que deixa o texto em itálico, mas em forma de bloco.

<blockquote>

Bloco de citação

<center>

Tag que gera um bloco centralizado.

<frameset>

Cria um site dividido em frames ou molduras.

<form>, <fieldset>, <label> e <legend>

Formulário e suas tags.

<h1>, <h2>, <h3>, <h4>, <h5> e <h6>

Todos os cabeçalhos.

<hr>

Linha horizontal.

<dir> e <menu>

Foram substituídos por <ul>.

<noframes>

Conteúdo alternativo para navegadores que não suportam frameset.

<noscript>

Conteúdo alternativo para navegadores que não suportam script.

<p>

Parágrafo.

<pre>

Bloco com texto pré-formatado

<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>, <colgroup> e <col>

Tabela e seus elementos.

<ul>, <ol>, <dl>

Listas com bullets, numeradas e de definição.

<li>, <dt>, <dd>

Todos os ítens de listas.

Elementos inline

<span>

Tag genérica para gerar um elemento inline.

<a>

Âncora, usada para links.

<abbr> e <acronym>

Abreviatura e acrônimo.

<applet>

Insere um programa em Java na página.

<b> e <strong>

Negrito

<basefont>

Tag de fonte que só funciona no Internet Explorer, portanto é totalmente dispensável.

<bdo>

Com essa tag você pode escolher se o texto é da esquerda para a direita ou da direita para a esquerda.

<big>

Texto grande

<br>

Apesar de servir para gerar uma quebra de linha, <br> é um elemento inline.

<button>

Elemento de

<cite>, <dfn>, <em>, <i> e <var>

Itálico como aqui.

<code>, <kbd>, <samp> e <tt>

Texto monoespaçado.

<del>, <s> e <strike>

Riscado como aqui.

<font>

Fonte.

<iframe>

Insere uma página dentro de outra.

<img>

Imagem.

<input>

Campos de formulário como e .

<ins> e <u>

Sublinhado como aqui.

<map>

Mapa de imagem.

<object>

Insere um objeto na página.

<q>

Insere aspas antes e depois do texto. No Internet Explorer essa tag não faz nada.

<select>

Caixa de seleção.selessão.celeção.celessão.

<small>

Texto pequeno

<sub>

Texto um nível abaixo, _{como este}.

<sup>

Texto um nível acima, ^{como este}.

<textarea>

Área de texto como esta aqui..

Elemento inline exibido como block e vice-versa

Nível: intermediário

Um elemento inline pode ser exibido como block usando display:block. Exemplo:

Exemplo de elemento inline exibido como block.

Exemplo de <span style='display:block;border:1px solid black; padding:5px;'>elemento inline exibido como block.</span>

Um elemento block pode ser exibido como inline usando display:inline. Exemplo:

Exemplo de elemento block exibido como inline.

Exemplo de <h3 style='display:inline;'>elemento block exibido como inline.</h3>

Um elemento block pode ser exibido como none usando display:none. Exemplo:

Exemplo de elemento block exibido como none.

Exemplo de elemento block <div style='display:none;'>exibido como none.</div>

Um elemento inline pode ser exibido como none usando display:none. Exemplo:

Exemplo de elemento inline exibido como none.

Exemplo de elemento inline <span style='display:none;'>exibido como none.</span>

Fontes: web design from scratch, CSS no Lanche e HTMLDog

Imagens: Alibaba.com e Wikimedia Commons