How to insert spaces/tabs in text using HTML/CSS

Question

Possible ways:

<pre> ... </pre>

or

style="white-space:pre"

Anything else?

[White space in HTML](http://webdesign.about.com/od/styleproperties/p/blspwhitespace.htm), [Tabs in HTML](http://webdesign.about.com/od/intermediatetutorials/qt/tiphtmltab.htm), [Spacing Out Your HTML](http://webdesign.about.com/od/beginningtutorials/a/aabg101399a.htm), and of course ` ` — benedict_w, Mar 20 '12 at 18:40
There's no `&tab;`, but I did find this little js snippet on github (basically find and replace to create five ` ` in a row)... https://gist.github.com/AustinDizzy/1231e82184bea35c42ad — dmgig, Apr 26 '16 at 00:01

score 168 · Answer 1 · answered Feb 04 '15 at 00:56

168

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

&emsp; and &ensp;

answered Feb 04 '15 at 00:56

Giri

2,704
2
25
27

score 128 · Answer 2 · edited Jul 27 '19 at 17:27

128

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>

edited Jul 27 '19 at 17:27

Peter Mortensen

30,738
21
105
131

answered Mar 20 '12 at 20:53

Japol

1,289
1
7
3

3

Note: Make sure to specify the height or width in terms of pixels, i.e. 10px. – About7Deaths Jul 02 '19 at 13:52

score 65 · Answer 3 · edited Jul 27 '19 at 17:26

65

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.

edited Jul 27 '19 at 17:26

Peter Mortensen

30,738
21
105
131

answered Mar 20 '12 at 18:39

Halim Qarroum

13,985
4
46
71

score 50 · Answer 4 · edited Jul 27 '19 at 17:34

Try &emsp;.

As per the documentation at Special Characters:

The character entities &ensp; and &emsp; 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.

score 33 · Answer 5 · answered Sep 02 '18 at 12:28

33

Types of Spaces in HTML

Creates four spaces between the text- &emsp;

Creates two spaces between the text - &ensp;

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]

answered Sep 02 '18 at 12:28

Vivek Budithi

562
4
14

1

worked fine for the browsers that I tested, new and old versions of Chrome and Firefox. worked on some but not all. – Al Martins Oct 01 '21 at 18:30

score 24 · Answer 6 · edited Mar 12 '18 at 02:56

24

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>

edited Mar 12 '18 at 02:56

Community

1
1

answered Jun 29 '15 at 04:30

Ivar Harris

259
2
2

1

This is a good answer. But I just would like to say that it would be better using CSS class instead of id (it means replacing `#tab` by `.tab` and `id="tab"` by `class="tab"`) because if we use it more than once in a same document, we may have undefined behaviors. See, for instance, [this question](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme). – Hilder Vitor Lima Pereira Jul 10 '17 at 09:38
1

This helped me today. Thank you so much. – justnisar Jun 14 '18 at 23:32

score 16 · Answer 7 · edited Jul 27 '19 at 17:29

16

<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.

edited Jul 27 '19 at 17:29

Peter Mortensen

30,738
21
105
131

answered May 14 '13 at 17:33

sammyukavi

1,501
2
23
51

score 9 · Answer 8 · edited Jul 27 '19 at 17:42

9

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...

edited Jul 27 '19 at 17:42

Peter Mortensen

30,738
21
105
131

answered Nov 22 '18 at 10:19

Dan

315
2
13

Aye, now _that's_ a trick worth remembering... yay to modern CSS! – Gwyneth Llewelyn Apr 12 '23 at 12:41

score 6 · Answer 9 · edited Jul 27 '19 at 17:31

6

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

You can also use:

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

edited Jul 27 '19 at 17:31

Peter Mortensen

30,738
21
105
131

answered Jun 23 '14 at 05:35

Ron1925

61
1
1

score 5 · Answer 10 · edited Jul 27 '19 at 17:40

5

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.

edited Jul 27 '19 at 17:40

Peter Mortensen

30,738
21
105
131

answered Nov 17 '18 at 05:54

mastro

51
1
2

MrSwed · Answer 11 · 2023-05-25T07:03:22.620

4

Use the standard CSS tab-size. see browser compatibility

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{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
    one tab text
        two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
    one tab text
        two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
    one tab text
        two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
    one tab text
        two tab text
</pre>

edited May 25 '23 at 07:03

answered Jan 21 '19 at 21:11

MrSwed

559
8
15

It would be helpful for all users if you add the info about browser compability. [**Caniuse page says that IE11 does not support `tab-size`**](https://caniuse.com/mdn-css_properties_tab-size_length). – Bharata May 23 '23 at 17:56
@Bharata, ok, I'll make the link more explicit – MrSwed May 25 '23 at 07:01

score 4 · Answer 12 · answered Jun 10 '20 at 14:32

4

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

answered Jun 10 '20 at 14:32

prasoon

901
8
25

1

WARNING! The link is corrupted. – manuele Aug 25 '21 at 07:55

score 3 · Answer 13 · edited Jul 27 '19 at 17:32

3

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 :)

edited Jul 27 '19 at 17:32

Peter Mortensen

30,738
21
105
131

answered Apr 25 '16 at 23:58

Amr Saber

988
10
26

3

Tables should be used to represent tabular data, not for formatting. In the 90s tables where frequently used for formatting because of limitations in HTML and frustrations writing HTML with styles that worked consistently across browsers. Today it is considered to be an anti-pattern. – David Baucum Mar 28 '17 at 18:01
I see your point, It may be some old-school solution but I had his problem once and using tables worked perfect for me – Amr Saber Mar 30 '17 at 06:39
1

Yes, but you can use table styling (with modern CSS) without messing up the semantic meaning! display: table, etc. – Julix May 30 '17 at 19:38
Well, **tab** is an abbreviation of the word **tabulator**, which was basically a spring-mounted lever which advanced the mechanical typewriter's carriage a fixed amount of space, dividing it in precise columns... for making tables to align precisely! :-) Aye, that's what it was used for: "tabs" were designed to make "tables". So, doing the equivalent in HTML is not _quite_ "messing up" with semantics, but rather using _older_ semantics for something that we have forgotten in the modern world of computers, which have replaced mechanical typrewriters but still have similar functions & names... – Gwyneth Llewelyn Apr 12 '23 at 12:48

score 2 · Answer 14 · edited Jul 27 '19 at 17:35

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

score 1 · Answer 15 · edited Jul 27 '19 at 17:37

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).

score 1 · Answer 16 · edited Jul 27 '19 at 17:38

1

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;

edited Jul 27 '19 at 17:38

Peter Mortensen

30,738
21
105
131

answered Jan 11 '18 at 04:10

James Pac

31
5

score 1 · Answer 17 · edited Jul 27 '19 at 17:47

1

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

edited Jul 27 '19 at 17:47

Peter Mortensen

30,738
21
105
131

answered May 05 '19 at 08:01

Roshan Yadav

133
1
3
14

score 0 · Answer 18 · answered Mar 21 '22 at 21:10

0

in my case I needed to insert at the beginning of each paragraph, so I did the following and it worked for me, I hope it can help someone

p:first-letter {
    margin-left: 20px
}

answered Mar 21 '22 at 21:10

Fernando_Akistapace

136
1
1

score -2 · Answer 19 · edited Apr 13 '23 at 06:08

-2

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

It may not display correctly on the rendered version of the answer, but you can copy & paste it from the Markdown source if you wish.

edited Apr 13 '23 at 06:08

Gwyneth Llewelyn

796
1
11
27

answered May 15 '19 at 13:14

James

1

1

I think you need to phrase the answer more clearly. Do you mean copy and paste a space from somewhere ? i dont think that would work here. – smilyface May 15 '19 at 13:20
1

There is a TAB in the Markdown source, but not in the HTML output here (it is instead a single space). – Peter Mortensen Jul 27 '19 at 17:51

How to insert spaces/tabs in text using HTML/CSS

19 Answers19

Linked