Adding Spaces to Your HTML (ASYH)

Adding spaces to your HTML may seem tricky. And there are at least 5 ways to do it.

This tutorial will show you some examples. It will also show you how to use the fancy room version.

You can do all of this in raw HTML, without the need for CSS. But keep in mind that CSS is the preferred way to add spacing to your HTML. And freeCodeCamp has a bunch of tutorials on how to do it using the CSS box model.

Using ASCII

The ASCII character code for space is 20. But this is just the standard way. There are several

There are 5 types of spacing in HTML that you can use. At first glance, they look the same but have slightly different purposes.

And there is also the Tab Character which represents pressing the tab key on your keyboard. And the Carriage Return Character, which represents pressing the enter key on your keyboard.

+---------+-----------+
| Character | HTML Code |
+----------+-----------+
| Non-breaking space |   |
| In space |   |
| Em space |   |
| Thin space |   |
| Standard space |  |
| New Line ( Return )    | 
 |
| Tab Character | 	 |
+----------+-----------+

How wide is the space character?

There are four common widths for space characters:

1. Standard width spacing. It is also called "non-line breaking space" because it will not cause a line break (also called a carriage return).
2. Em space. It's called an "Em" because it's the same width as the letter M in the font you're using. (If you've ever heard the term em-dash, it's a dash the length of the letter M.)
3. En space. It's called "En" because it's the same width as the letter n in your typeface.
4. And finally, there is “Thin space”, the thinnest of all spaces.

Space symbol in HTML

The most frequently used HTML entity is 

You can try using this text to force spaces to appear.

For example, let's say you want to add two spaces after a sentence, but something in the site's rendering engine automatically removes one of the spaces. You might be able to type  to add two spaces.

How to create whitespace in HTML?

You may want to use CSS to style your HTML elements rather than rigidly defining spacing.

But if you just want a quick way to create whitespace and move text around, you can use the same space character over and over like this:

[ The text you want to add trailing whitespace to ]        [ the text you want to add trailing whitespace to ]

What character looks like a space but isn't really a space?

There are two characters that look like spaces but aren't:

1. New Line Character - also known as "carriage return". The HTML code for the new line character is:
2. The Tab character, which appears when you press the tab key in a text field. The HTML code for the Tab character is: