[html] How to insert spaces/tabs in text using HTML/CSS

Possible ways:

<pre> ... </pre>

or

style="white-space:pre"

Anything else?

You can do through padding like <span style="padding-left: 20px;">, you can check more ways here at - blank space in html

Alternatively referred to as a fixed space or hard space, non-breaking space (NBSP) is used in programming and word processing to create a space in a line that cannot be broken by word wrap.

With HTML,   allows you to create multiple spaces that are visible on a web page and not only in the source code.

Use the standard CSS tab-size.

To insert a tab symbol (if standard tab key, move cursor) press Alt + 0 + 0 + 9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

My preferred:

*{-moz-tab-size: 1; tab-size: 1;}

Look at snippet or quick found example at tab-size.

.t1{_x000D_
    -moz-tab-size: 1;_x000D_
    tab-size: 1;_x000D_
}_x000D_
.t2{_x000D_
    -moz-tab-size: 2;_x000D_
    tab-size: 2;_x000D_
}_x000D_
.t4{_x000D_
    -moz-tab-size: 4;_x000D_
    tab-size: 4;_x000D_
}_x000D_
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>_x000D_
<pre>_x000D_
 one tab text_x000D_
  two tab text_x000D_
</pre>_x000D_
_x000D_
<h3>tab = 1 space</h3>_x000D_
<pre class="t1">_x000D_
 one tab text_x000D_
  two tab text_x000D_
</pre>_x000D_
_x000D_
<h3>tab = 2 space</h3>_x000D_
<pre class="t2">_x000D_
 one tab text_x000D_
  two tab text_x000D_
</pre>_x000D_
_x000D_
<h3>tab = 4 space</h3>_x000D_
<pre class="t4">_x000D_
 one tab text_x000D_
  two tab text_x000D_
</pre>

This worked for me:

In my CSS I have:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Then in the HTML I just use my tabs:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

Try  .

As per the documentation at Special Characters:

The character entities   and   denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font. For fixed pitch fonts, the user agent can treat the en space as being equivalent to A space character, and the em space as being equivalent to two space characters.

White space? Couldn't you just use padding? That is an idea. That is how you can add some "blank area" around your element. So you can use the following CSS tags:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Types of Spaces in HTML

Creates four spaces between the text-  

Creates two spaces between the text -  

Creates a regular space between the text -  

creates a narrow space ( similar to regular space but slight difference - "&thinsp";

spacing between sentences - "</br>"

This link might help you. Check out [https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

I like to use this:

In your CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

In your HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

In cases wherein the width/height of the space is beyond   I usually use:

For horizontal spacer:

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

For vertical spacer:

<span style="display:block; height: YOURHEIGHT;"></span>

If you're asking for tabs to align stuff in some lines, you can use <table>.

Putting each line in <tr> ... </tr>. And each element inside that line in <td> ... </td>. And of course you can always control the padding of each table cell to adjust the space between them.

This will make them aligned and they will look pretty nice :)

Go a step further than @Ivar and style my own custom tag like so... For me 'tab' is easier to remember and type.

tab {
    display: inline-block;
    margin-left: 40px;
}

And the HTML implementation...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

And my screenshot...

You can use   for spaces, < for < (less than, entity number <) and > for > (greater than, entity number >).

A complete list can be found at HTML Entities.

<span style="padding-left:68px;"></span>

You can also use:

padding-left
padding-right
padding-top
padding-bottom

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

The first line of this paragraph will be indented about five characters, similar to a tabbed indent.

See How to Use HTML and CSS to Create Tabs and Spacing for more information.

To insert tab space between two words/sentences I usually use

  and  

Here is a "Tab" text (copy and paste): " "

It may appear different or not a full tab because of the answer limitations of this site.

user8657661's answer is closest to my needs (of lining things up across several lines). However, I couldn't get the example code to work as provided, but I needed to change it as follows:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

If you need right-aligned numbers you can change left:150px to right:150px, but you'll need to alter the number based on the width of the screen (as written the numbers would be 150 pixels from the right edge of the screen).

You can use this code   to add a space in the HTML content. For tab space, use it 5 times or more.

Check an example here: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace