&nbsp and space in HTML tips and techniques

Non breaking spaces in HTML and email content. How to handle HTML entities in code and tests.

There more to white-space than the spacebar. Computers have many ways of encoding space in documents, be they emails, PDFs, or HTML. The non-breaking space character (  character in HTML) is commonly used to separate strings and denote a string that should not be put onto a separate line after the space.

What are HTML entities?

In HTML or emails containing HTML some characters need to be encoded as HTML entities in order to be read by a computer. These include currency symbols like € or £ or the less than or greater than symbols: < and >. The HTML entities are special strings that denote such characters. Here are some examples:

  • Non-breaking space &nbsp ;
  • Less than &lt; <
  • More than &gt; >
  • Ampersand &amp; &
  • Euro &euro; €
  • Pound &pound; £

What is nbsp and what does it do?

An &nbsp html entity is very common and stands for non-breaking space. Use it in HTML or emails to ensure a sentence is not split onto multiple lines or to ensure space based padding or text.

When to avoid nbsp in HTML

nbsp alternatives

You can add space to HMTL in other ways to avoid the downsides of &nbsp non-breaking space characters. Here are some alternatives for spacing content.

  • Try adding CSS margins or padding to your content.
  • Use an HTML table to layout content into rows and columns.
  • Use other space characters

Other space characters

There are many HTML entities for fine control of spacing. Here are just a few:

  • En space &ensp;
  • Em space &emsp;
  • Punc space &puncsp;
  • Thin space &thinsp;
  • Hair space &hairsp;

Does how thin the hair space shows depend on the age of the website?...

Spaces in emails

Emails are notoriously difficult to style and space content. For many years developers and email markerters have styled emails using tables and unfortunately that is still the case today. However table cellpadding or css padding properties let you space content quite accurately using HTML.

Sending HTML email in code

MailSlurp lets you send and receive emails using a powerful and free email API service. Create test email accounts and send utf-8 encoded emails that can be encoded safely for you. See the developer pages for more.