Espaço HTML: como incluir espaços diretamente no HTML

Você sabia que é possível incluir espaço HTML diretamente no seu documento .html, sem precisar utilizar o CSS?

Atualmente, o CSS permite inserir diversos estilos, inclusive controlar o espaçamento entre qualquer elemento HTML. Porém, muitas vezes, editar estilos no CSS é algo que demanda maior tempo. Imagine que você queira apenas incluir um espaço entre linhas no seu código, para que perder tempo com linhas de código de CSS, se tudo isso poderia ser feito apenas com o uso de uma tag de quebra de linha?

A maioria dos desenvolvedores também pode sentir dificuldades para incluir um espaçamento maior em algumas partes do texto, principalmente quando querem exemplificar um código. Dessa forma, com técnicas de espaço HTML, você consegue fazer isso rapidamente utilizando apenas uma entidade.

Primeiramente, veja abaixo tudo que você precisa para dominar as técnicas de espaço HTML:

• Espaço com a tag HTML <p>
• Espaço com a tag HTML <br/>: quebra de linhas
• Mesclando o <br> com o <p>
• A tag <pre>
• O espaço HTML e sua prática
• Como gerar um espaço entre linhas com CSS?

Espaço com a tag HTML <p>

A tag <p> permite a inserção de parágrafos no conteúdo HTML. Por si só, o uso desta tag nos permite espaçar um parágrafo do outro, mesmo que no código eles estejam na mesma linha. Ou seja: ao fechar a tag com </p>, o HTML gera uma quebra de linha. Além disso, a tag <p> traz consigo as características padrão de margem superior e inferior no valor de 1em, o que gera um espaço maior entre essa tag e qualquer outro elemento. Essa é uma das técnicas básicas de espaço HTML.

Vejamos então o exemplo abaixo:

<p>minha linha de código</p><p>meu segundo parágrafo</p>

O resultado final será:

minha linha de código

meu segundo parágrafo

Portanto, com o simples uso correto desta tag, já podemos administrar bem o espaço entre os conteúdos da página HTML.

A entidade &nbsp;

Digamos que dentro de um elemento você queira incluir um espaço equivalente a apertar a tecla espaço 4 vezes. Seria necessário então incluir quatro espaços entre os elementos, correto? Infelizmente o código HTML lê apenas um espaçamento único, portanto podemos incluir quantos espaços quisermos e ainda assim o resultado será como se só tivesse apertado a tecla espaço uma única vez. Vejamos o exemplo a seguir:

<p>Home    Host.</p>

O resultado será:

Home Host.

Então como resolver esse problema no HTML?

O HTML permite o uso de entidades que representam símbolos ou teclas. A entidade que representa a tecla do espaço é a &nbsp; (non-breaking space). Portanto, para acrescentar espaços entre nossos elementos, basta o acréscimo do &nbsp; dentro do nosso código. Vamos agora refazer o código anterior utilizando quatro vezes o código referente a espaçamento:

<p>Home&nbsp;&nbsp;&nbsp;&nbsp;Host.</p>

O resultado será:

Home    Host.

Além desse código, é possível também utilizar outras formas que têm a mesma função e representam a mesma entidade. Existem ainda duas entidades pré-estabelecidas que adicionam dois ou quatro espaços: &ensp; e &emsp;. Vejamos então o exemplo abaixo:

<p>Home&nbsp;Host.</p>
<p>Home Host.</p>
<p>Home&ensp;Host.</p>
<p>Home&emsp;Host.</p>

O resultado será:

Home Host.

Home Host.

Home Host.

Home Host.

Portanto, essa técnica facilita muito o trabalho do desenvolvedor de software, permitindo utilizar inclusive regras de tabulações, que são muito importantes para a escrita de códigos.

Podemos ver outras entidades do HTML através da documentação oficial da W3C.

Espaço com a tag HTML <br/>: quebra de linhas

Anteriormente, vimos que entre um parágrafo e outro é realizado a quebra de linha. Mas, e se quisermos acrescentar uma ou mais linhas a essa quebra? Basta utilizar a tag <br/> (break). Com isso, podemos incluir quantas linhas quisermos entre os parágrafos. Este método é muito utilizado para gerar um espaço diretamente no código HTML sem precisar estilizar no CSS. Desta forma o trabalho do desenvolvedor pode ser realizado em menos tempo, e nos permite quebra de linhas entre qualquer elemento, não apenas parágrafos, como por exemplo os <span>. Outra característica importante da tag break é que ela não possui características de margem, portanto, atua diferentemente da quebra de linha da tag <p>. Dessa forma, podemos utilizar a tag break aliada às tags de parágrafo de uma forma interessante, como veremos posteriormente.

Vejamos então o exemplo a seguir:

<p>Como inserir uma<br/>quebra de linha</p>

Dessa forma temos o seguinte resultado:

Como inserir uma
quebra de linha

Como explicado anteriormente, podemos aplicar quantos breaks quisermos, portanto, podemos criar um espaçamento maior. Vejamos então o exemplo abaixo:

<p>Vamos inserir uma<br/><br/><br/>quebra de três linhas.</p>

Com esse exemplo, chegamos ao seguinte resultado:

Vamos inserir uma

quebra de três linhas.

Mesclando o <br/> com o <p>

Observe também que a tag <br/> não gera um espaço igual à quebra de linha que é gerado com o fechamento da tag <p>. Isso ocorre por que a tag <p>, por padrão, possui uma margem superior e inferior de 1em e a break não traz consigo esse padrão de margem. Com isso, podemos  inserir conteúdos como poemas e poesias com um padrão visual mais adequado. Veja no exemplo a seguir, utilizando o poema “No meio do caminho“, de Drummond:

<p>No meio do caminho tinha uma pedra<br/>
Tinha uma pedra no meio do caminho<br/>
Tinha uma pedra<br/>
No meio do caminho tinha uma pedra</p>
<p>Nunca me esquecerei desse acontecimento<br/>
Na vida de minhas retinas tão fatigadas<br/>
Nunca me esquecerei que no meio do caminho<br/>
Tinha uma pedra<br/>
Tinha uma pedra no meio do caminho<br/>
No meio do caminho tinha uma pedra.</p>

A tag <pre>

Através da tag <pre></pre> do HTML, podemos incluir um texto que ficará com a formatação original, ou seja, assumirá todos os caracteres digitados. Com isso, todos os espaços digitados no elemento serão incluídos na renderização. Além disso, a tag <pre> traz consigo um valor de margem superior e inferior de 1em, assim como a tag <p>. Vejamos então o exemplo a seguir:

<pre>Meu texto.    Ola
Mundo.</pre>

O resultado será:

Meu texto.    Ola
Mundo

Portanto, podemos utilizar a tag <pre> para facilitar principalmente quando queremos utilizar tabulações, por exemplo: na escrita de códigos.

O espaço HTML e sua prática

Conforme vimos nesse artigo, existem diversas formas de se utilizar técnicas de espaçamento através do próprio código HTML. Dessa forma, como desenvolvedor, você consegue implementar diversas soluções que através do CSS poderia levar muito mais tempo. Porém, recomendamos que utilize com uma certa moderação, e para situações realmente necessárias, pois isso implica num número maior de bits no seu código, portanto, mais tempo para renderização. Portanto, a depender da necessidade, vale mais a pena estilizar um elemento do que ficar utilizando quebras diversas vezes. Recomendamos também que você crie um documento HTML e utilize as técnicas explicadas anteriormente para praticar!

Como gerar um espaço entre linhas com CSS?

Para finalizar, vale a pena entender também a propriedade line-height, propriedade do CSS que modifica o espaço padrão do HTML sem precisar alterar as propriedades de margem, padding ou borda. Ou seja: essa propriedade é capaz de alterar o espaçamento entre linhas. Com isso, podemos utilizar valores pré-estabelecidos, valores em unidades de medidas (como px, em, cm), porcentagem ou um valor numérico. Veja no exemplo a seguir, diferentes formas de utilizar a propriedade line-height.

div.a {
  line-height: normal;
}
div.b {
  line-height: 1.6;
}
div.c {
  line-height: 80%;
}
div.d {
  line-height: 20px;
}

Além disso, você também pode acessar a documentação oficial da W3C para aprender outras características dessa propriedade.