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  , 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   tag
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 words
[su_note note_color=”#FFF9C4″]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.[/su_note]
[su_label type=”success”]Suggested read : [/su_label] : 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.
[su_label type=”success”]Suggested read : [/su_label] : 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>
[su_label type=”success”]Suggested read : [/su_label] : 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>
[su_label type=”success”]Suggested read : [/su_label] 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> <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.