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:
Character | Name | Description |
---|---|---|
| Non-breaking space | Adds a single space that prevents line breaks |
  | En space | Adds a wider space (roughly two spaces) |
  | Em space | Adds an even wider space (roughly four spaces) |
  | Thin space | Adds a narrow space |
  | Hair space | Adds an ultra-narrow space |
​ | Zero-width space | Invisible 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:
- John Gruber: Markdown Inline HTML
- John Gruber: Markdown Syntax Code Blocks
- Wikipedia: Markdown
- Wikipedia: Separation of concerns.
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.