Quebra de linha em HTML: possibilidades da tag <br>

Quem trabalha com posts cheios de imagens já está careca de saber que a tag <br/>, quando solitária, não resolve todas nossas necessidades de quebra de linha. Quando você incrementa mais a diagramação do post precisa ter um controle maior das quebras de linha para que fique tudo no seu devido lugar.

Segue um exemplo do que estou falando:

Observe que o tópico 2 está “encavalado” com a imagem do tópico 1. Isso acontece bastante quando fazemos posts com imagens alinhadas aos lados. Muitas pessoas tentam gambiarras para resolver o problema, como:

• mudar os tamanhos das imagens;
• colocar várias vezes a tag <br/>, mas depois nota que não fica do mesmo jeito em todos os navegadores;
• mudar o alinhamento das imagens, geralmente colocando todas alinhadas do mesmo lado.
• mudar totalmente a diagramação do post, já que não consegue resolver o problema.

Mas há outra forma mais simples e definitiva, que é usar o parâmetro clear na tag.

• Resolvendo com clear="all"
• Resolvendo com clear="right" ou clear="left"

► Resolvendo com clear="all"

Uma das soluções é bastante simples: acrescentar clear="all" à tag de quebra de linha que separa um tópico do outro e também ao final do último tópico com imagem:

<br clear="all"/>

Exemplo de código:

<img src="imagem-do-primeiro-topico.png" align="right"/>
<h3>Título do 1º tópico</h3>
<p>Texto do 1º tópico</p>
<br clear="all"/>
<img src="imagem-do-segundo-topico.png" align="left"/>
<h3>Título do 2º tópico</h3>
<p>Texto do 2º tópico</p>
<br clear="all"/>

Resultado:

► Resolvendo com clear="right" ou clear="left"

Outra opção interessante é deixar a imagem do 2º tópico ocupando o espaço não usado pelo texto do 1º tópico. Agora a tag de quebra de linha – <br clear="right"/> – deve ser colocada depois da imagem do 2º tópico.

Ao final do último tópico com imagem, continue usando <br clear="all"/>.

Exemplo de código:

<img src="imagem-do-primeiro-topico.png" align="right"/>
<h3>Título do 1º tópico</h3>
<p>Texto do 1º tópico</p>
<img src="imagem-do-segundo-topico.png" align="left"/>
<br clear="right"/>
<h3>Título do 2º tópico</h3>
<p>Texto do 2º tópico</p>
<br clear="all"/>

Resultado:

Se a imagem do primeiro tópico estiver alinhada à esquerda e a do 2º tópico à direita, ao invés de clear="right" usamos clear="left":

Esse recurso não funciona quando a folha de estilos do blog obriga o elemento a seguir outro tipo de alinhamento. Para solucionar isso é preciso conhecer o CSS do site.

Há outra forma de gerar quebra de linha sem usar a tag <br/> e usando CSS. Espero voltar em breve para mostrar essa possibilidade.

Se você gostou deste post, deverá gostar também de:

• Alinhamento de imagens
• Elementos block e inline em CSS

Até mais!