Put Spaces Between Text in HTML

Let's go over the different ways to insert spaces into HTML text. Since HTML compresses all the space characters in your HTML file (i.e. tabs, spaces, etc.) to one character, you will need to use special methods to add more than one space.

This can be frustrating as sometimes HTML makes it hard to handle whitespace on your webpages. In this article, we will list the different ways you can avoid this issue and have more control over the whitespaces in your HTML text.

HTML <Pre> Tag

HTML <pre> tags are used for indicated preformatted text. Which means your HTML code tells the browser that the text within the tag should be displayed exactly as written in the HTML file, including any spaces or blank lines.

Here's an example of using the <pre> tag:

<div>
  <pre>
          This text
    has preserved
    spaces and       line breaks
  </pre>
</div>

Will produce the following result, which will look exactly like it does inside the <pre> tags:

This text
has preserved
spaces and       line breaks

HTML Whitespace Characters

Next, we're going to cover a few of the many Unicode whitespace characters that you can use in HTML (see the full list here).

Here's the list of the ones we'll cover, each of which gives differing widths of whitespace:

• Non-Breaking Space:   or  
• Narrow Non-Breaking Space:  
• En Space:   or  
• Em Space:   or  
• 3-Per-Em Space:   or  
• 4-Per-Em Space:   or  
• 6-Per-Em Space:  
• Figure Space:   or &#8199;
• Punctuation Space:   or  
• Thin Space:   or  
• Hair Space:   or  

All you need to do is copy and paste the code symbols into your HTML to add the whitespace.

CSS Methods

Using CSS will give you the most consistent results when working with whitespace in your text.

The two key ways are using an empty span with a specified width and setting the margin to the right and left of blocks of texts.

We will cover both methods below.

Empty Span With Specified Width

In this method, we are going to add an empty div in the middle of the sentence and give it a width of 15px. This will add whitespace of that length inside the sentence. Check it out below.

Example HTML:

<div>
  <span>This is an <span style="display:inline-block; width: 15px;"></span> example sentence.
<div>

And has the following output:

This is an  example sentence.

Setting Margin on Span

This method is similar to the previous technique, but we will be using the margin-left and margin-right properties inside of width. Using margin will give you more control on the spacing on either side of the text. Check it out below.

Example HTML:

<div>
  <span>This is an <span style="display:inline-block; margin-left: 15px; margin-right: 15px;"></span> example sentence.
<div>

And has the following output:

This is an  example sentence.