Web Standards:

How to insert spaces in HTML

Summary

This article explains how to insert empty spaces in HTML using entities, the <pre> and <code> elements, CSS properties (word-spacing and letter-spacing), inline CSS, and JavaScript. In total, this article explains 7 different ways to insert spaces or empty space in HTML.

Published:

2025-02-19

Updated:

2025-02-25

Reading time:

02:39

Author:

Jonas Jared Jacek

Tags:

web development, html

License:

CC BY-SA 4.0

Permalink:

How to insert spaces in HTML

Introduction #

There are multiple ways to add empty spaces in HTML, including using HTML space entities, e.g.  , the <code> and <pre> elements, CSS properties such as word-spacing and letter-spacing, inline styles, and JavaScript. Choosing the right method depends on your specific use case.

Some of the methods also work, if you want to insert multiple spaces in Markdown.

HTML space entities #

HTML uses special space entities to insert empty spaces. Below is a table listing the most commonly used space entities along with their corresponding numeric codes:

Space width descriptions #

• non-breaking space ( )
  takes up the same width as a normal space.
• en space ( )
  is half the width of an em space.
• em space ( )
  is roughly the width of the letter ‘M’ in the current font.
• thin space ( )
  is thinner than a normal space, useful for fine spacing adjustments.
• hair space ( )
  is even thinner than a thin space and is barely visible.
• zero-width space (​)
  takes up no visible space and is mainly used for word-breaking.
  Added simply for completeness.

All of these space entities provide fine control over spacing in HTML content and Cascading Style Sheets (CSS), allowing for precise text formatting. Simply use them inside your text, e.g.:

<p>I like&ensp;en space and&emsp;em space.<br>
They rock more than&#8202;hair space.</p>

Which will be rendered as:

I like en space and em space.
They rock more than hair space.

Add spaces using the <code> element #

If you want to preserve spaces inside a code element, you should use non-breaking spaces ( ). Here is an example:

<p><code>This &nbsp; &nbsp; code has spaces.</code></p>

The spaces are visible when the page is rendered:

This     code has spaces.

Of course, the text will take the styling of the <code> element.

Add spaces using the <pre> element #

The <pre> element preserves all spaces and line breaks exactly as they are written in the code:

<pre>
This     text     has     multiple     spaces.
</pre>

The output will maintain the spaces exactly as they appear in the source code:

This     text     has     multiple     spaces.

Of course, the text will take the styling of the <pre> element.

Add spaces using CSS word-spacing #

The word-spacing property in (CSS) controls the space between words. Example:

<p style="word-spacing: 20px;">This is an example of word spacing.</p>

The words will be spaced 20 pixels apart:

This is an example of word spacing.

Add spaces using CSS letter-spacing #

The letter-spacing property adjusts the space between characters:

<p style="letter-spacing: 5px;">Letter spacing example</p>

Each letter in the paragraph will be spaced 5 pixels apart:

Letter spacing example

Add spaces using inline CSS #

You can use inline CSS styles to add spaces directly in an HTML element:

<p style="margin-left: 30px;">This paragraph has left margin space.</p>

This method is useful when you need precise control over spacing:

This paragraph has left margin space.

Add spaces using JavaScript #

JavaScript can be used to modify spacing dynamically. For example, you can change the word-spacing property using JavaScript:

<p id="text">This is a JavaScript example.</p>
<button onclick="increaseSpacing()">Increase Space</button>
<button onclick="resetSpacing()">Reset Space</button>

<script>
function increaseSpacing() {
    document.getElementById("text").style.wordSpacing = "10px";
}

function resetSpacing() {
    document.getElementById("text").style.wordSpacing = "normal";
}
</script>

When you click the “Increase Space” button, the space between words will increase dynamically. Clicking the “Reset Space” button will return the spacing to its default setting:

This is a JavaScript example.

Increase Space Reset Space

Further readings #

Sources and recommended, further resources on the topic:

• ISO: ISO/IEC 10646:2020 - Universal coded character set (UCS)
• Wikipedia: List of character entity references in HTML
• HTML specification: code element
• HTML specification: pre element
• W3C: CSS specification - word-spacing property
• W3C: CSS specification - letter-spacing property
• How to insert empty spaces in markdown

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/how-to-insert-spaces-in-html">How to insert spaces in HTML</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>