&nbsp and HTML space tips and solutions

 , AKA non-breaking space, is a character used in HTML to create a white space. In this post we analyze usage and performance solutions.

Whitespace seems like a simple thing. You press spacebar and you get a space - right? Well, in the world of computers and websites, spaces in text can become complicated. Due to the way HTML was designed and the methods browsers use to read and display HTML the use of space has some issues that are best to keep in mind.

An important way to control spaces in HTML and emails is to use an HTML entity called the NonBreakingSpace - also known as  .

An introduction to HTML entities

There are many ways to encode text in HTML (encoding basically means making text readable for computers). This could be in representing currency symbols such as or ¥ for instance or angle brackets such as < and >.

To take the later example: because the angle brackets are used in HTML to denote the beginning and end of an HTML tag those characters cannot be used literraly in text without either being escaped (another topic!) or encoded in a safe way that the computer understands. For that reason HTML entities were invented. By writing a special code in HTML (starting with an ampersand and ending with a semicolon) we can tell the computer that we mean to write another character.

So to use an < less than symbol in HTML we can use the HTML entity &lt;. Here are some more examples:

Name Entity code Result
Less than &lt; <

So what about the &nbsp?

So now we have covered HTML entities let's talk about non-breaking spaces - for that is what nbsp means. A non breaking space simply means a press of the spacebar: a whitespace character that does not break the line (like a return or press of the enter button might imply). There are many ways to write an nbsp in HTML or in emails. The simplest is simply &nbsp;. Notice the & at the start and ; at the end. If you forget these sorrounding characters it will show the letters nbsp instead.

Here is a table of aliases that also give you a non-breaking space

Name Entity code Result
Non-breaking-space &nbsp;
Non-breaking-space &NonBreakingSpace;
Non-breaking-space &#x000A0;
Non-breaking-space &#160;

Why though?

When you need make sure that a whitespace is not collapsed in the HTML you are white (say, a space between two divs) use an &nbsp; entity to ensure the whitespace is always rendered.

<!-- using a space between divs can get squeezed by the browser -->
<div> </div>
<!-- use a non-breaking space entity to prevent browser naughtiness -->
<div>&nbsp;</div>

Next steps

For more information on non-breaking spaces see here.

Ready to dive in?Start building email applications today.