Whitespace symbol for space in HTML tag with Examples

Looking for how to use symbols to add for space in HTML? Here are examples for adding whitespace or blank space in HTML code tags with &nbsp, pre, and CSS.

In HTML, there is always n number of ways to do the same thing.

I have also listed a few of them in the article. Choose one that suits you the best based on use cases.

There are some HTML as well as CSS tricks to achieve that. Html space tag also comes handy when you just want to add a single space.

I am assuming you have landed here because you don’t want to add by pressing spacebar infinite times. We are not going to list that in the guide.

1. Using HTML space &nbsp tag

&nbsp; comes to rescue in case you want to add just a single space before or after some text.

Example: If we add space between “spaced words” and want to achieve “spaced   words”, we should use :

spaced &nbsp;&nbsp; words
In a WYSIWYG ( what you see is what you get) editor such as WordPress editor, you will have to switch to the code editor to use and add these entities.
Suggested read : : Best JavaScript Frameworks trending now

2. Keep spaces in the copied text

If you have copied some text from somewhere and want to retain the text padding or spaces, you can use <pre></pre> HTML tags.

This tag keeps the original formation of text from the source and doesn’t modify it.

Example :

This    line   has        spaces in      between

This can be achieved by adding pre tags to it.

<pre >This    line   has        spaces in      between</pre>

However, the point here is to always use the HTML code editor when you are using the WYSIWYG editor.

Suggested read : : 11 Best Editor for Web Development IDEs

3. Add space to start of each line

In cases where you want the line to start by leaving some space at the start of the line, you can use this example.

This trick is helpful if you are writing a paragraphed text and want each paragraph to start leaving some space at the beginning.

Example :

                 test1    | test2  |   test3

This can be achieved by adding CSS styling and wrapping with <span></span> HTML tag.

<span style="padding-left:20px">test1    | test2  |   test3</span>
Suggested read : : Forever free blog with Google App Engine WordPress in 10 min

4. Using horizontal/vertical blank space

If you want to use height or width which requires width or height kind of property, we have a trick for you.

Example :

For adding horizontal space :

<span style="display:inline-block; width: 40px;"></span>

For adding vertical space :

<span style="display:block; height: 40px;"></span>
Suggested read :  5 Best IDE for React and ReactJs text editors

5. Add space in HTML after paragraph

If you wondering how to add space after each paragraph, here is a quick tip for you. Just use <br/> tag and it should solve the problem.

Example: If you want this kind of space after paragraph,

This sentence contains example text.

As you can see, two breaks add the space above.

You can use <br/> tag.

<p>This sentence contains example text.<br>
As you can see, two breaks add the space above.</p>

A complete list can be found at HTML Entities.

Let us know if there was a different use case for you and we have missed it in our guide for space in HTML. We will try to add a solution.

Leave a Comment