Adding space and tabs in html

Html strips more than 1 blank space. So, for example, if you want to write – Iron      Man, the html will strip all the consecutive spaces and keep only one. So, our output will be Iron Man. But in order to add spaces in html, we can use html codes like  ,  ,   etc.

Using  

  is used to add single space within html. So, if you want to add multiple spaces, you can use multiple  .   stands for No-Break SPace, which means that it will prevent line breaks. If you add too many   then they will cross the webpage width and will not wrap. Also, the spaces will show in continuity which means they won’t break or wrap at the end of line.

<p>Let's add 5 spaces     but output shows only 1.</p>

Output: Let's add 5 spaces but output shows only 1.

In the above code, let’s add   and then run –

<p>Let's add 5 spaces&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output shows 5.</p>

Output: Let's add 5 spaces     output shows 5.

Using  

There is another html code,  , which is used to add 2 consecutive spaces. This is known as En Space. It’s size is equal to half the size of em. An em in a font is mostly 16px so the size of this spacing is 8px.

<p>This will add 2 spaces&ensp;here.</p>

Output: This will add 2 spaces  here.

Using  

  stands for emphasized spacing. This is almost equal to 4 spaces. But it all depends on the font. The actual size is 1em which is generally equals to 16px. So, in other words, it is double to the size of  .

<p>This will add 4 spaces&emsp;here.</p>

Output: This will add 4 spaces    here.

Using  

  stands for thin space or narrow space. As the name indicates, this spacing is used to add a tiny space which is equal to 1/6 of em.

<p>This will add thin space&thinsp;here.</p>

Output: This will add thin space here.

Using text-indent CSS property

If you have the requirement to add spaces in the beginning of first line of the paragraph, then you can use text-indent css property. Consider this example –

<p style="text-indent:80px">
This is the long paragraph. The first
line will begin from 80px from left. All
other lines will stay at the allowed leftmost
part of the paragraph.
</p>

Output:
          This is the long paragraph. The first 
line will begin from 80px from left. All other 
lines will stay at the allowed leftmost part of 
the paragraph.

Note: Html do not provide any ways to add tabstop.

    Tweet this to help others

Live Demo