Spaces in HTML can be difficult to understand for the novice web designer, because whether you type 1 space or 100 in your HTML, the web browser automatically collapses those spaces down to just one. So, how do you add spaces in HTML that show up on the web page? There are many different ways:
Spaces in HTML: The Best Way
The best way to add spaces in your HTML is with CSS. You can use the margin or padding properties to add space around elements. Plus the text-indent property adds space to the front of text, such as for indenting paragraphs.
Spaces in HTML: Inside Your Text
If you just want to add an additional space or two to your text, you can use the non-breaking space. This character acts just like a standard space character, only it does not collapse inside the browser.
Here is an example of how to add 5 spaces inside a line of text:
This text has five extra spaces inside it
Uses the HTML:
<p>This text has     five extra spaces inside it</p>
You can also use the
<br> tag to add extra line breaks. But it is much better to use the margin or padding CSS properties if you can. For example:
<p>This sentence has <br><br><br><br><br>five line breaks in the middle of it</p>
<p style="margin-bottom:2.5em;">This paragraph has a bottom margin of 2.5em.</p>