Todos os elementos HTML podem ser separados em dois grupos, em termos de comportamento visual CSS: elementos bloco (block) e elementos em linha (inline). Ser bloco ou em linha muda o comportamento visual do elemento, além de outras características, o que veremos a seguir. Apesar de podermos mudar o modo de exibição de cada elemento com CSS, cada tag por padrão pertence a um ou outro grupo.

Elementos bloco ocupam todo o espaço horizontal disponível e iniciam uma nova linha no documento. Novos elementos irão começar na próxima linha livre.

Visualizar Exemplo

Exemplos de elementos bloco:

• div (division, ou divisão, tag bloco genérica)
• h1 até h6 (títulos)
• p (parágrafo)
• blockquote (citação em bloco)
• ul (lista não ordenada)
• ol (lista ordenada)
• form (para formulários, veremos mais na unidade "Trabalhando com Formulários")

Elementos em linha ocupam apenas o espaço necessário e não iniciam uma nova linha. São chamados elementos em linha justamente por aparecer na mesma linha que outros elementos, caso seja possível.

Visualizar Exemplo

Exemplos de elementos em linha:

• span (tag em linha genérica)
• strong (destaca importância)
• em (ênfase)
• a (âncora, usada para links)
• img (imagem)

Aninhamento de Elementos

Uma página é feita de blocos empilhados. Dito isso, muitas vezes iremos inserir um elemento dentro de outro para conseguirmos construir um layout adequado e com a hierarquia de informações que desejamos. Inserir um elemento dentro de outro chama-se aninhamento (ou nesting) e em documentos HTML há algumas regras principais a serem notadas:

• Elementos bloco podem conter qualquer elemento em linha;
• Elementos bloco podem conter outros elementos bloco, observadas algumas restrições (por exemplo, não podemos colocar uma div dentro de um parágrafo mas o contrário é válido). Geralmente segue-se o bom-senso nesses casos;
• Elementos em linha nunca poderão conter elementos bloco (ex: colocar um parágrafo dentro de um link ou uma div dentro de uma span). A HTML5 apresenta algumas mudanças no caso do que links (tags a) podem englobar, exceto isso esta regra é geral;
• Elementos em linha podem conter outros elementos em linha (por exemplo, colocar span dentro de um link ou o contrário).

Aplicação de Propriedades CSS

Além das diferenças já apresentadas, elementos bloco ou em linha também diferem nas propriedades CSS que podem ser aplicadas com confiabilidade. Elementos em linha podem ter os seguintes tipos de propriedades modificadas:

• Cores de texto e de fundo;
• Propriedades de texto, como font-family, font-size e outras, como text-decoration;
• Bordas.

Propriedades como width, height, margin e padding podem surtir efeito no elemento em questão mas geralmente não irão afetar os outros elementos. Ou seja, para fins de layout e posicionamento, quando se usam muitas definições de dimensões e margens, usar elementos em linha não é recomendado.

Elementos bloco, além de todas as propriedades dos elementos em linha, também podem ter modificadas:

• Largura (width) e altura (height);
• Margens internas (padding) e externas (margin).

Quando queremos usar tags como a para compor um menu, na grande parte das vezes a transformamos em elemento bloco. Para isso, usa-se a importante propriedade display CSS.

A Propriedade Display

A propriedade display serve para mudarmos o comportamento visual de um elemento, como mudar uma tag a (em linha) para bloco ou uma tag p para elemento em linha. Ela aceita vários valores, dos quais os principais são:

• block: elemento aparece como se fosse bloco;
• inline: elemento aparece como se fosse em linha;
• none: elemento não aparece, útil quando utilizado junto com JavaScript para fazê-lo aparecer com algum efeito visual, entre outras aplicações.

Lembre-se: mesmo que mudarmos visualmente como um elemento aparece na página, as regras de aninhamento ainda são as mesmas.

Vejamos um exemplo abaixo:

.link-normal {
    background: #00F;
    color: #FFF;
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
}

.link-bloco {
    display: block;
    background: #00F;
    color: #FFF;
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
}

Visualizar Exemplo

Perceba a diferença entre os dois elementos: enquanto o link em linha ocupa apenas o espaço necessário para o texto, o link bloco ocupa toda a largura permitida da página. Além disso, apesar das propriedades margin e padding terem sido aplicadas, elas não afetam os outros elementos da mesma forma. A margem interna do link em linha, por exemplo, está fazendo efeito porém não afeta os elementos ao seu redor (perceba que a área do link está sobrepondo a do link bloco).

Portanto, quando montamos layouts, normalmente iremos converter os elementos para bloco (ou então utilizaremos elementos bloco) pois permitem maior controle sobre as dimensões, posicionamento e margens. Por exemplo, a utilização de uma ul com links convertidos para bloco é a base de muitos menus de websites hoje.

Experimente com diferentes elementos e descubra quais são bloco e quais são em linha por padrão. Também experimente com a propriedade display para verificar a mudança de comportamento entre elementos. Iremos utilizar bastante esta propriedade na construção do nosso website.