How to put spaces between text in html?

Question

How do you to put spaces between text in html? For example,

a b       c

What do you put to have space between b and c?

Answer 1

There are several ways.

Pre Tag

One is to use the <pre> tag, which will render content with the whitespace intact.

Space Entities

Another is to add space entities, like   (non-breaking space). Keep in mind with this approach, there are several space entities, and this particular entity does not word-wrap, which may not be the behavior you wanted.   renders a normal space, which the browser should not collapse, and which will word-break as expected.

Here is a list of different Unicode spaces you can use.

CSS

Also, you usually should not use HTML entities to create space between text which is not part of one uniform sentence. This is because in this case, the better solution is to use margin or padding to separate the two, and keep each in its own element.

As another answer mentions, CSS letter-spacing is also an option if the spacing is consistent but larger than normal.

Here's an example of all these approaches (the CSS is not important here):

th, td {
  border: 1px solid black;
  padding: 3px;
}

th {
  background-color: darkgrey;
  color: white;
}

table {
  border-collapse: collapse;
}

body {
  font-family: sans-serif;
}

<table>
  <thead>
    <tr>
      <th colspan="2">HTML Spacing</th>
    </tr>
    <tr>
      <th>Method</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td><td><p>a b       c</p></td>
    </tr>
    <tr>
      <td>Pre Tag</td><td><pre>a b       c</pre></td>
    </tr>
    <tr>
      <td>Margin Left</td><td><span>a </span><span>b</span><span style="margin-left: 3.5em;">c</span></td>
    </tr>
    <tr>
      <td>Non-breaking Space</td><td><p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p></td>
    </tr>
    <tr>
      <td>Em Space</td><td><p>a b&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;c</p></td>
    </tr>
    <tr>
      <td>Letter-Spacing</td><td><span>a </span><span style="letter-spacing: 3.5em;">bc</span></td>
    </tr>
  </tbody>
</table>

Answer 2

Use   . This will not breaks line too.

Answer 3

Use the CSS property word-spacing to set space between words. You can also use <span> and apply margin or padding.

So:

span { margin-left:1em }
<p>a b <span>c</span></p>

Answer 4

You can try to put   between them. Like this:

<p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p>

Answer 5

Try using white-space with value pre.

pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

p {
  white-space: pre;
}

<p>a b       c</p>

Use a monospaced font if you need each black space to take exactly one character width.

p {
  white-space: pre;
  font-family: monospace;
}

<p>a b       c</p>