Insert tab spaces characters in text – HTML CSS
Space Using HTML Syntax
4 ways to insert Space via HTML code:
1. Single Space ( )
  – This is a non-breaking space that generates single or regular spaces. This is also called fixed spaces that cannot be broken by word wrap.
Use single-space syntax multiple times in the text to make space wider.
You can also write as  .
2. Double Space ( )
  – This is called ‘en’ two spaces gap, and whitespace is normally twice the spaces of regular (single) space. It denotes half point size of the current font.
3. Four (4x) space gap ( )
  – ’em’ four spaces gap, is equal to the point size of the current font and typically as much as four times wider than the common regular space.
4. Narrow Space ( )
  – this is called narrow space, which is usually more narrow than a regular space.
Space Using <pre> element or tab-size property
Apply either of one approach, use text in <pre> element or set the tab-size property for <pre> element tag to render space in the text.
1. <pre> tag Approach
Simply add tabs or multiple spaces in the inner text within <pre> element tag and that will be rendered in the same format. The <pre> element simply represents preformatted text.
WordPress provides a ‘code’ block feature in its editing tool which uses the same <pre> element tag to render the pasted text like highlighting programming or script codes, and preserves the same format.
Highly recommended if you want to display multiple tabs, spaces, and linebreaks on the output page without breaking newlines & whitespace characters.
HTML syntax:
<pre>
your text
goes here.
</pre>
Output:
your text
goes here.
2. tab-size property Approach
The tab-size property is used to specifiy the tab’s width size in HTML code. You need to change the value of tab character through tab-size property by using style.
Note: you can also use 	 to denote as tab space.
CSS style code:
<style> .TabSpace { tab-size: 4; } </style>
<pre> sample text </pre>
<pre> sample	text </pre>
HTML code:
<!DOCTYPE html>
<html>
<head>
<style>
#tab1 {
-moz-tab-size: 4;
tab-size: 4;
}
.tab2 {
-moz-tab-size: 12;
tab-size: 12;
}
</style>
</head>
<body>
<h2>pre tab-size property example</h2>
<pre>Approach 1: without tabsize property
displays as it is .
</pre>
<pre id="tab1">Approach 2 (tab-size:4): This is pre tabsize	example.</pre>
<pre class="tab2">Approach 2 (tab-size:12): pre tab size	sample.</pre>
</body>
</html> 
Space Using CSS styles
Use margin or padding CSS style properties if white space is required before or after span, paragraph, div or any element tag. Best, reliable and recommended solution in such scenarios.
1. Margin-left space
2. Padding-left space
reference: wikipedia.org/wiki/Whitespace