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>
O problema de
é 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
e  
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
Existem entities para várias coisas, por exemplo:
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:
<br>
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
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
:
<title>Carro 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.
entities
para espaço no html, existe essa exceçã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.
Não sei se existe o correto nesse caso, mas pode usar
Que renderiza um espaço em branco.
div{float:left;}
<div>Texto 1</div><div> texto que quero um espaço antes</div>
Ou ainda  
que renderiza uma tabulação.
div{float:left;}
<div>Texto 1</div><div> texto que quero um espaço antes</div>
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>
pre-wrap
, pre-line
e afins...
Commented
17/01/2017 às 19:01
white-space
é a solução ideal para a pergunta, economizando e muito com visual do código.
Commented
18/01/2017 às 13:40
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>
Ó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>
E  
para inserir um espaço tab.
div{float:left;}
<div>Texto 1</div><div> texto que quero um espaço antes</div>