Adding HTML Space: Options and Examples

Non-breakable Space in HTML

When you’re writing your text in, say, Microsoft Word, you can easily add multiple spaces in a line. HTML does not allow that. It has a feature called whitespace collapse: no matter how many spaces you type, the browser will reduce them to a single space.

So, how to add space in HTML? The easiest option is the non-breakable space entity, and there are two ways to add it:

 
 

You can include it to add an uncollapsible HTML blank space between words, images, or other page elements. It will also prevent an unwanted line break. For example, in the code snippet below, you can see how to add space in HTML numbers as the thousands separator, and also ensure the browser does not break it up:

There are 9 000 000 bicycles in Beijing.

Try not to use the non-breakable space in HTML too much: without line breaks, your browser might need a horizontal scroll bar. This doesn’t help the user experience. You also shouldn’t use it to create indents, align the characters, or otherwise manipulate their position in the page. Instead, use CSS stylesheets.

Other Options in HTML for Space

In some cases, you may want to add space in HTML to separate parts of your text. The non-breakable space is really not an option in this case. You should use either a <br> tag for a line break or wrap your paragraphs in <p> tags to define them as separate:

Knock, knock!<br>
Who’s there?

<p>The knock-knock joke contains questions and answers. It typically ends with a punny punchline.</p>

<p>The joker says "Knock, knock!", as if they are knocking on the door of a house. The recipient then has to answer by asking who’s there.</p>

One more way to keep all the HTML blank space you typed is preformatting your text by wrapping it in <pre> tags:

<pre>
                              __
                     /\    .-" /
                    /  ; .'  .' 
                   :   :/  .'   
                    \  ;-.'     
       .--""""--..__/     `.    
     .'           .'    `o  \   
    /                    `   ;  
   :                  \      :  
 .-;        -.         `.__.-'  
:  ;          \     ,   ;       
'._:           ;   :   (        
    \/  .__    ;    \   `-.     
     ;     "-,/_..--"`-..__)    
     '""--.._:

<pre>

Preformatting text keeps all HTML spaces and blank lines just as you typed them. Thus, it is useful when you need to convey some visual meaning. In the example above, you see an ASCII image. You can also use <pre> for writing addresses, poems, and other texts that follow a certain format.

By default, browsers display preformatted text in a fixed-width font. However, you can change that using CSS.

CSS Alternatives for HTML Blank Space

The ways to add a space in HTML discussed above are useful, but you should not rely on them for styling and modifying the position of elements. Instead, check out these CSS properties:

• margin adds HTML space around an element (outside the borders).
• padding adds HTML space around an element’s content (inside the borders).
• text-align aligns text according to the chosen value (left, right, center, or justify).
• text-indent adds HTML space in front of the first text line.

Using a CSS stylesheet is much more convenient when you need your styling to be consistent. You only need to adjust one line for the changes to affect the whole page, instead of going through each paragraph.

HTML Space: Useful Tips

• You can use shortcuts to add a non-breakable space in most word processors. Try Option+Space for MacOS, Ctrl+Shift+Space for MS Word or OpenOffice, and Ctrl+Alt+Space for Windows (alternatively, you can hold Alt and press 0160 on the number pad).
• You can also include two or four spaces at once by typing   or  .
• Non-breakable spaces can also be useful in HTML tables. Adding one to an otherwise empty cell can prevent a table from collapsing in browsers that don’t support empty cells.
• If you decide to use CSS properties to add blank space, avoid defining values in absolute units. They won’t adapt to font or screen size changes, so use percentages and em units for better responsiveness.