A Propriedade display em CSS: Elementos inline e block - Tutorial

Em nossos tutoriais sobre o modelo das caixas (Box Model) em CSS pudemos ver como os elementos do layout de um site são caixas, ou blocos, que vão se encaixando, se acomodando e formando um site.

Mas, como tudo no CSS, é possível também alterar como essas caixas são exibidas em um site, e isso será feito através da propriedade display em CSS.

• Fazer download da Apostila de HTML + CSS

Propriedade CSS display - Como os elementos são exibidos

Que os elementos de um site são blocos, ou retângulos e vão se encaixando entre si através de configurações de HTML e CSS para formar um layout, estamos careca de saber.

Inclusive, ao estudar as propriedades margin, border e padding vimos que é possível fazer diversas mudanças nessas "caixas", como espaçá-las, colocar bordas com diversos tipos de efeitos e até aumentar seu espaçamento interno.

Mesmo com essas possibilidades, essas caixas continuam a ser caixas, blocos retângulos.
O que a propriedade CSS display faz é mudar como essas caixas vão se comportar.

Aliás, display, em inglês, significa exibir, e através da propriedade CSS display iremos selecionar como os elementos de um site serão exibidos e como vão se relacionar entre site.

No decorrer de nossos tutoriais de CSS, vimos basicamente dois tipos de propriedade CSS display, que foram os display block e display inline, que vamos explicar melhor agora.

O que são elementos em bloco (block) e em linha (inline) no CSS

Um importante tipo de caixa é o do tipo bloco (block box), exemplos desse tipo de display são os parágrafos <p>.
Lembre-se que quando usamos esta tag, ela cria um bloco, uma divisão, que separa o parágrafo do que estiver acima e do que estiver abaixo.

Como exemplo, vamos escrever "Tutorial de CSS", mas vamos colocar o "de" entre as tags <p> e </p>, o código HTML é:

Tutorial <p>de</p> CSS

Se testarem o resultado, verão que a palavra "de" foi isolada, tem um bloco só para ela, uma divisão abaixo e acima, além de tomar toda a largura (width) disponível.

O mesmo ocorre com a tag <div>, testem o seguinte código:

Tutorial <div>de</div> CSS

O resultado é o mesmo:
Tutorial

de

CSS

Um outro tipo comum de tipos de caixa, são as do tipo inline, ou em linha.
Se nos elementos do tipo block havia uma divisão acima, abaixo e pegava todo o espaço lateral, o mesmo não ocorre nos elementos inline, como o nome sugere, esses elementos ficam na mesma linha.

O exemplo mais clássico é de negrito <b>.
Veja, vamos colocar somente a palavra "de" entre as tags <b>:
Tutorial de CSS

O mesmo ocorre com a tag <i>, que dá o efeito de itálico:
Tutorial de CSS

As Propriedades CSS display: inline e display: block

Ok, vimos que algumas tags são do tipo block por padrão, como as de parágrafo e as divs.
Já outras, como as de negrito <b>, itálico <i> e a <span> são inline, pois são renderizadas na mesma linha.

Isso no HTML, no padrão.
Como sempre, o CSS nos dá a incrível flexibilidade e poder de mudar o que quisermos, e isso vai ficar ainda mais claro quando aprendermos sobre a propriedade display do CSS.

Basicamente, usando a propriedade display com o valor inline, estamos dizendo para o CSS exibir aquele elemento como se fosse inline, e caso usemos a propriedade display com o valor block, aquele elemento vai ser exibido como se fosse naturalmente block, ou seja, com uma divisão abaixo, acima e ocupando toda a largura (width).

Como usar a propriedade CSS display: inline

Por exemplo, as tags de cabeçalho H1, H2, H3 etc, são todas do tipo display: block, por padrão.
Vamos mudar isso?

No seu documento HTML teste o código:

<h1>Tutorial </h1>
<h2>de </h2>
<h3>CSS</h3>

Agora em sua folha de estilos experimente fazer:

h1, h2, h3{
 display: inline;
}

O resultado vai ser que estas tags ficarão uma ao lado da outra, onde antes, sem o uso de display inline, elas ficariam uma abaixo da outra.

Como usar a propriedade CSS display: block

E assim como fizemos na propriedade anterior, para transformar um elemento display block em display inline, o contrário é possível e análogo, bem simples.

Por exemplo, alguns defacers, hackers que costumam invadir sites para alterar sua aparência apenas, costumam 'bagunçar' os sites, deixando-os feios, e uma maneira bem simples de fazer isso é através da propriedade display.

Por exemplo, as tags de negrito <b> e itálico <i> são elementos display inline por padrão, afinal seria extremamente incômodo ter uma divisão, uma quebra de linha antes e depois de cada palavra em negrito, seria uma bagunça.

Por exemplo, o código HTML dessa frase: Tutorial de CSS
É:

<b>Tutorial</b> <i>de</i> <u>CSS</u>

Adicionando o simples código CSS em sua folha de estilos:

b, i, u {
 display: block;
}

Você já faria com que todas as palavras em negrito, itálico e sublinhadas se tornassem do tipo display block. Simples e poderoso, esse CSS, não?

Mais propriedades CSS display

Para nossos propósitos atuais, de nossos tutoriais básicos de CSS, entender o que é, como funciona e como usar o display: inline e o display: block é, por hora, suficiente.
Porém, a propriedade display vai muito mais além e nos fornecesse diversas opções no quesito de 'exibir' (display) algum elemento de nosso site.

No decorrer de nosso Curso de HTML e CSS iremos estudar as outras possibilidades existentes da propriedade display em detalhes, mas por hora iremos dar um pequeno resumo sobre o que é possível fazer com essa fantástica propriedade do CSS display.