HTML Space Code

This page contains HTML code for adding a space within the text of your website or blog. As with adding a horizontal tab, there is more than one way to do this.

The most common way of adding a space is to use the appropriate special character. However, depending on what you're trying to acheive, you could use Cascading Style Sheets (CSS) or even the HTML <pre> tag to add some space.

Non-Breaking Space

The most common method is to use the non-breaking space character. This is a space that can be used to prevent the line from "breaking". The result is that the text on either side of the space can remain together (albeit with a space between). If the text must wrap to a new line, both words on either side of the non-breaking space will wrap together (i.e. they will always remain on the same line as each other).

When using HTML entities, you can use either the entity number or the entity name.

HTML Entity Number

This example uses the HTML entity number to display the non-breaking space.

HTML Entity Name

This example uses the entity name. As you can see, the end result is the same. It's your choice which one you use.

Usage Example

This example demonstrates what happens when a line is forced to wrap when there's a non-breaking space. The first line does not have a non-breaking space. The second line does.

Other Special Characters

There are other special characters that can be used to create a space. Below is a demonstration of the amount of space that these create.

HTML Entity Number

Here's how you use the HTML entity number to display the various spaces.

HTML Entity Name

Same spaces, just using the entity name instead.

Using CSS

You can use the CSS margin-left and/or padding-left properties to create space.

Using Margins

Here's an example of using margin-left to create a space.

Using Padding

This example uses padding-left to create space.

Preformatted Content

You can use the <pre> tag to display content that is preformatted. This means that the content will appear in the browser just the way you entered it. Therefore, if you type in a space with your keyboard, the browser will display that space when the web page is rendered.

In the following example, I created a bunch of different spaces with my keyboard (I also used the tab key). You can see that the <pre> element honors those spaces.

Note that browsers usually display <pre> text using a fixed-width font (such as Courier), but you can use CSS to change this as you see fit.

No space
 One space
      Six spaces
	One tab
		Two tabs

Blockquotes

The <blockquote> element usually results in its contents being indented (i.e. a space is added to the left). So in theory, you could say that this is adding a space. However, you should only use the <blockquote> tag if you are citing a quote from another source.