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

Question

I need to put a space before a text that is found between tags html, what is the right way to do ? No css...

div{float:left;}

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

Answer 1

The problem of   is that it adjusts the spacing by font size (font-size), so to adjust the layout is very difficult, what you can do is to 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 right way to do it? No css...

It would use CSS simply to adjust, there is no correct way, after all it 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.

In the basic HTML   and   there is a tag that can help achieve the effect, would be the <pre>, for example:

<pre>
foo bar                       foobar baz
</pre>

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

---

When to use entities?

There are entities for various things, for example:

• Accentuation
• Spacing
• Hard to write characters via keyboard

Understand that entities came before CSS was so functional, before the most we had was font-size and color in CSS, so we depended on things like:

• Many spacings as  
• Many line breaks with <br>
• Tables to make menus

The result of this were usually somewhat confusing Htmls.

Many of these entities can still be used, but today they are perfectly replaced by more practical things within the CSS itself, in cases of accents or iso-8859-1 or UTF-8 well configured will have no problems.

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

For example, a short space with 3   already resolve, if you have more maybe it is better to have an html element, so you can control by 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>

If it’s the tag <title> and need spaces can simply use the  :

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

Of course you have to be aware that for SEO making descriptive and reduced titles is critical, so it will hardly use entities in titles, unless it’s something specific.

Answer 2

I don’t know if there’s anything right about this case, but you can use it  

Rendering a blank space.

div{float:left;}

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

Or else   that renders a tab.

div{float:left;}

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

Answer 3

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 to say:

pre: Blank spaces are preserved by the browser. The text will only be broken in line breaks. It works equal to the tag <pre>

Answer 4

You can use the text-indent.

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

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

Answer 5

Óras, use margin for that reason:

div { float: left }

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

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

Answer 6

And   to insert a tab space.

div{float:left;}

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