Skip to main content
Markdown Syntax:

How to add empty spaces in markdown

Summary

Explanation of different methods to add multiple white space characters in Markdown (.md) documents: HTML entities, invisible characters, preformatted text blocks, and Math environments. With examples and outputs for each method.

Introduction #

Markdown is a lightweight markup language that allows users to write formatted text using plain text. While it is simple and versatile, Markdown does not natively support adding multiple consecutive white space characters as part of its syntax. However, there are several techniques, not to say hacks, to achieve this effect.

In this article I will discuss the different methods to insert multiple white spaces in Markdown documents. Make sure you always test your document in the target environment to ensure the desired effect is achieved.

Using HTML space entities #

Markdown supports embedding HTML, making HTML entities an effective way to add extra spaces. The non-breaking space ( ) is commonly used for this purpose.

Example #

This is     an example.

Output #

This is     an example.

Each   represents one space. By repeating it, you can create the desired number of multiple spaces.

List of HTML space characters #

You may use any of the following HTML space entities:

CharacterNameDescription
 Non-breaking spaceAdds a single space that prevents line breaks
 En spaceAdds a wider space (roughly two spaces)
 Em spaceAdds an even wider space (roughly four spaces)
 Thin spaceAdds a narrow space
 Hair spaceAdds an ultra-narrow space
​Zero-width spaceInvisible but allows line breaks

Using invisible characters #

You can insert invisible Unicode characters such as the zero-width space (​) or the hair space ( ). While these characters are technically invisible, they occupy space in the text.

Example #

This is     an example.

Output: #

This is     an example.

This method provides good control over the spacing but may not render consistently across all platforms.

Using code blocks or inline code #

Text in code blocks or inline code retains the original spacing, making it a straightforward way to preserve multiple spaces.

Example #

This is `   ` an example.

Output: #

This is     an example.

While this method works, it also changes the font and style of the text to code. It is also not supported by all markdown renderers. So it may not be suitable in all scenarios.

Using preformatted text blocks #

Preformatted text blocks maintain all spaces and line breaks as they are written. To create a preformatted block, use triple backticks (```) or indent lines with four spaces.

Example #

```
This    is    an    example.
```

Output: #

This    is    an    example.

This method is ideal for scenarios where you want to preserve formatting across multiple lines. Unfortunately, it also changes the font and style of the text to codeblock, so it may not be suitable in all scenarios.

Using Math Environment #

Some Markdown interpreters support “Math environment”. This method uses mathematical expressions to add spaces. By inserting tilde (~) characters inside dollar signs ($), you can create one or more white spaces.

Example #

These are five $~~~~~$ spaces.

Output: #

These are five     spaces.

This solution works great if you, e.g. convert markdown to .pdf documents using pdflatex or similar.

Combining Markdown with HTML and CSS #

If you are working in a Markdown environment that supports custom CSS (e.g., GitHub Pages or a static site generator like Jekyll), you can use CSS styles to control spacing.

Example #

<span style="margin-right: 20px;">This is</span>an example.

Output: #

This isan example.

This method provides pixel-perfect control over spacing but requires the Markdown processor to support inline HTML and CSS.

Using this method is not recommended!
Firstly, no white space characters are added, and secondly, style instructions should not be in Markdown documents, but in external CSS files. See the Separation of concerns design principle.


Further readings #

Sources and recommended, further resources on the topic:

Author

Jonas Jared Jacek • J15k

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/

License

License: How to add empty spaces in markdown by Jonas Jared Jacek is licensed under CC BY-SA 4.0.

This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:

<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-add-empty-spaces-in-markdown">How to add empty spaces in markdown</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/"></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>

For more information see the Ditig legal page.


“Form ever follows function.”

Louis Henry Sullivan, American architectThe Tall Office Building Artistically Considered, - IT quotes