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
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.
Source CodeResult
No Break
No Break
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.
Source CodeResult
No Break
No Break
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.
Source CodeResult
Without non-breaking space:
With non-breaking space:
Without non-breaking space:
Here are two words
With non-breaking space:
Here are two words
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.
Source CodeResult
No space
Thin space
En space
Em space
No space
Thin space
En space
Em space
HTML Entity Name
Same spaces, just using the entity name instead.
Source CodeResult
No space
Thin space
En space
Em space
No space
Thin space
En space
Em space
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.
Source CodeResult
Hey, give me some space!
Hey, give me some space!
Using Padding
This example uses padding-left to create space.
Source CodeResult
Hey, give me some space!
Hey, give me some space!
Preformatted Content
You can use the
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
element honors those spaces.
Note that browsers usually display
text using a fixed-width font (such as Courier), but you can use CSS to change this as you see fit.
Source CodeResult
No space
One space
Six spaces
One tab
Two tabs
No space
One space
Six spaces
One tab
Two tabs
Blockquotes
The
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 thetag if you are citing a quote from another source.