Como Inserir Espaços no HTML

Insira espaços diretamente nos seus documentos HTML sem o uso de CSS?

Aqui você terá um apanhado básico de como usar espaços do HTML de forma prática.

Parágrafos

O uso da tag <p> </p> por si só gera quebra de linhas entre sentenças criando parágrafos mesmo com sentenças escritas na mesma linha.

<p>Primeiro parágrafo.</p><p>Segundo parágrafo</p>

Entidade &nbsp; (non-breaking space)

Para criar regras de tabulações, podemos utilizar  a entidade &nbsp;, &ensp; e &emsp;

Veja exemplos:

<p>Portal&nbsp;do&nbsp;Economaster</p>
<p>Portal do Economaster</p>
<p>Portal&ensp;do&ensp;Economaster</p>
<p>Portal&emsp;do&emsp;Economaster</p>

Usando os códigos acima, o documento HTML apresentará os efeitos abaixo:

Portal do Economaster

Portal do Economaster

Portal do Economaster

Portal do Economaster

No documento HTML mesmo se você apertar a tecla espaço 4 vezes, o navegador só contará o uso de um espaço entre sentenças de caracteres, Por isso o uso da entidade &nbsp; é uma verdadeira mão na roda.

Uma outra utilização para a entidade &nbsp; é o de criar espaços maiores entre parágrafos.

Veja exemplos:

<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>

Primeiro parágrafo

Segundo parágrafo

Agora com a entidade &nbsp;:

<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>

Primeiro parágrafo

Segundo parágrafo

É como se existisse um parágrafo oculto ou um espaçamento maior entre parágrafos. Mas essa não é a melhor forma.

Espaço com a tag <br/> (break)

A melhor forma de inserirmos linhas entre parágrafos é usando uma quebra de linhas (break lines).

Veja exemplo a seguir usando a tag <br/>?

<p>Como quebrar linhas<br/>mesmo usando a tag de parágrafo</p>

Como fica do documento HTML:

Como quebrar linhas
mesmo usando a tag de parágrafo

Agora usando a tag <br/> para inserir linhas:

<p>Inserindo quebra de<br/><br/><br/><br/>quatro linhas</p>

Inserindo quebra de

quatro linhas

Usando <p> e <br/> em textos HTML

Existe uma pequena diferença entre os espaços criados no uso das tags <p> e <br/>.

Nas tags de parágrafos <p>, por padrão, existe uma margem em torno de 1em, enquanto que se usarmos uma quebra <br/> isso não existe, ou seja, com uma quebra de linha, apena criamos mais uma linha com espaçamento diferente daquela oriunda da criação de um novo parágrafo.

Vejamos o exemplo abaixo do poema Pontinho de vista, de Pedro Bandeira.

<p>Eu sou pequeno, me dizem,<br/>
e eu fico muito zangado.<br/>
Tenho de olhar todo mundo<br/>
com o queixo levantado.</p>
<p>Mas, se formiga falasse<br/>
e me visse lá do chão,<br/>
ia dizer, com certeza:<br/>
- Minha nossa, que grandão!</p>

Agora vejamos como o texto fica no documento HTML com as devidas marcações <p> e <br/>:

Eu sou pequeno, me dizem,
e eu fico muito zangado.
Tenho de olhar todo mundo
com o queixo levantado.

Mas, se formiga falasse
e me visse lá do chão,
ia dizer, com certeza:
– Minha nossa, que grandão!

Observe que o texto fica mais bonito visualmente e que a distância entre os parágrafos é diferente de uma quebra simples de linha.

Se gostou compartilhe com os amigos!