How to create space before or at the end of the text contained between html tags?

The problem with   is that it adjusts font size spacing ( font-size ), so adjusting the layout is very difficult, what you can do is adjust margin or 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>

  

What is the correct way to do it? No css ...

It would be to use CSS simply to adjust, there is no correct way, after all can achieve the effect in several ways and if dispensing CSS in HTML is almost the same as wanting to ride with a car using only the wheels and chassis, but all discovered .

<pre>
foo bar                       foobar baz
</pre>

Note: Every browser engine already injects a CSS technically into HTML, which gives the default format for things, sometimes called user-agent-stylesheet

When to use entities?

There are entities for various things, for example:

• Accentuation
• Spacing
• Characters difficult to type via keyboard

Understand that entities came before CSS was so functional, but the maximum we had was   and   in CSS, so we depended on things like:

• Many spacings like <pre>
• Many line breaks with font-size
• Tables to make menus

The result of this was usually somewhat confusing HTML.

Many of these color can still be used, but today they are perfectly replaced by more practical things within the CSS itself, in cases of accents   or <br> if well configured will not have problems.

Some difficult characters are replaced by font icons (woff, ttf, etc.), or if you use UTF8 on your page there are many emojis that solve, of course many things can still be done with% which is much simpler.

For example, a short space with 3 entities already resolves, if you have more maybe an html element is better, so you can control by iso-8859-1 :

.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>

If the tag is UTF-8 and needs spaces you can simply use entities :

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

Of course you have to be aware that for SEO to make descriptive and reduced titles is critical, then it will hardly use   in titles, unless it is something specific.

I do not know if the correct one exists in this case, but you can use  

That renders a blank space.

div{float:left;}

<div>Texto 1</div><div>&nbsp;texto que quero um espaço antes</div>

Or even   that renders a tab.

div{float:left;}

<div>Texto 1</div><div>&emsp;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>

According to the W3School :

  

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

That is:

  

Pre : Blanks are preserved by the browser. Text will only be broken in line breaks. It works just like the tag <pre>

However, use margin for this :

div { float: left }

div:nth-child(1) {
  margin-right: 6%
}

<div>Texto</div><div>texto que quero um espaço antes</div>

You can use text-indent .

.indent {
  text-indent: 50px;
  display: inline-block;
}

<div>Texto 1 <span class="indent">texto que quero um espaço antes</span></div>

And   to insert a tab space.

div{float:left;}

<div>Texto 1</div><div>&emsp;texto que quero um espaço antes</div>