15

Estou precisando colocar um espaço antes de um texto que se encontra entre tags html, qual é a forma correta de fazer ? Sem css...

div{float:left;}
<div>Texto 1</div><div>       texto que quero um espaço antes</div>

6 Respostas 6

14

O problema de &nbsp; é que ele ajusta o espaçamento pelo tamanho da fonte (font-size), então para ajusta o layout é muito difícil, o que pode fazer é ajustar margin ou padding:

.foo {
    float:left;
}
.bar {
    padding-left: 100px;
}
<div class="foo">Texto 1</div>
<div class="foo bar">texto que quero um espaço antes</div>

qual é a forma correta de fazer? Sem css...

Seria usar CSS simplesmente para ajustar, não existe forma correta, afinal pode alcançar o efeito de varias maneiras e se dispensar o CSS em HTML é quase o mesmo que querer andar com um carro usando apenas as rodas e chassi, mas todo descoberto.

No basico em HTML fora o &nbsp; e &emsp; existe uma tag que pode ajudar a atingir o efeito, seria o <pre>, por exemplo:

<pre>
foo bar                       foobar baz
</pre>

Nota: Todo motor de navegador já injeta um CSS tecnicamente no HTML, o que dá o formato padrão para as coisas, as vezes chamado de user-agent-stylesheet


Quando usar os entities?

Existem entities para várias coisas, por exemplo:

  • Acentuação
  • Espaçamento
  • Caracteres difíceis de escrever via teclado

Entenda que entities vieram antes do CSS ser tão funcional, antes o máximo que tínhamos era font-size e color no CSS, então dependíamos de coisas como:

  • Muitos espaçamentos como &nbsp;
  • Muitas quebras de linha com <br>
  • Tabelas para fazer menus

O resultado disso geralmente eram HTMLs um pouco confusos.

Muitos desses entities ainda podem ser usados, mas hoje são perfeitamente substituídos por coisas mais praticas dentro do proprio CSS, em casos de acentos o iso-8859-1 ou UTF-8 se bem configurados não terá problemas.

Alguns carácteres difíceis são substituídos por ícones de fontes (woff, ttf, etc), ou se usa UTF8 em sua página tem muitos emojis que resolvem, claro que muitas coisas ainda podem ser feitas com entities que é bem mais simples.

Por exemplo, um espaço curto, com 3 &nbsp; já resolve, se tiver mais talvez seja melhor um elemento html, assim pode controlar pelo width:

.space {
    display: inline-block;
    width: 100px;
}

.signature {
    display: inline-block;
    width: 100px;
    border-bottom: 1px #000 dotted;
}
<p>
Bla bla bla <span class="space"></span> Bla bla bla
Bla bla bla <span class="space"></span> Bla bla bla
Bla bla bla <span class="space"></span> Bla bla bla
</p>

<p>
Bla bla bla <span class="signature"></span> Bla bla bla
Bla bla bla <span class="signature"></span> Bla bla bla
Bla bla bla <span class="signature"></span> Bla bla bla
</p>

Se for a tag <title> e precisar de espaços pode simplesmente usar o &nbsp;:

<title>Carro&nbsp;&nbsp;&nbsp;Barco</title>

Claro que você tem que ter consciência que para SEO fazer títulos descritivos e reduzidos é fundamental, então dificilmente vai usar entities em títulos, a não ser que seja algo especifico.

4
  • certo, mas em quais casos seriam indispensáveis o uso de entities para espaço no html, existe essa exceção ?
    – MagicHat
    Commented 17/01/2017 às 19:04
  • @MagicHat as entidades veem antes do CSS ser tão funcional, vem de uma epoca aonde o que tinhamos de melhor era o <br> e o <p> e até tabelas para fazer as colunas do layout, hoje ele é dispensavel, a não ser quando vai escrever um texto, se bem que um elemento com display: inline-block; width: <medida da separação>; pode resolver muito melhor, e sem ficar preso a medida da fonte.
    – Syzoth
    Commented 17/01/2017 às 19:06
  • compreendo, mas ainda fico com a dúvida se há uma exceção...
    – MagicHat
    Commented 17/01/2017 às 19:08
  • @MagicHat pronto, editado novamente. Estava com alguns erros que impossibilitava entender o ultimo codigo.
    – Syzoth
    Commented 17/01/2017 às 23:25
7

Não sei se existe o correto nesse caso, mas pode usar &nbsp;

Que renderiza um espaço em branco.

div{float:left;}
<div>Texto 1</div><div>&nbsp;texto que quero um espaço antes</div>

Ou ainda &emsp; que renderiza uma tabulação.

div{float:left;}
<div>Texto 1</div><div>&emsp;texto que quero um espaço antes</div>

6

Use white-space: pre:

div {
  float:left;
  white-space: pre;
}
<div>Texto 1</div><div>       texto que quero um espaço antes</div>

De acordo com o W3School:

pre: Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML

Ou seja:

pre: Espaços em branco são preservados pelo navegador.O texto só será quebrado em quebras de linhas. Ele funciona igual a tag <pre>

3
  • 1
    Bem lembrado o white-space, +1. Commented 17/01/2017 às 18:58
  • Tem os outros atributos, mas acho que não convém citá-los: pre-wrap, pre-line e afins... Commented 17/01/2017 às 19:01
  • 1
    Sem dúvidas o white-space é a solução ideal para a pergunta, economizando e muito com visual do código. Commented 18/01/2017 às 13:40
5

Dá para usar o text-indent.

.indent {
  text-indent: 50px;
  display: inline-block;
}
<div>Texto 1 <span class="indent">texto que quero um espaço antes</span></div>

5

Óras, use margin para isso:

div { float: left }

div:nth-child(1) {
  margin-right: 6%
}
<div>Texto</div><div>texto que quero um espaço antes</div>

3

E &emsp; para inserir um espaço tab.

div{float:left;}
<div>Texto 1</div><div>&emsp;texto que quero um espaço antes</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .