NBSP Meaning: What is a Non-Breaking Space?

The term NBSP stands for Non-Breaking Space. It is a special whitespace character (Unicode U+00A0) that looks like a regular space but prevents an automatic line break at its position. Where a normal space allows the browser or text engine to wrap a line, an NBSP keeps the surrounding words or characters glued together on the same line.

In HTML, you write it as the entity   or its numeric equivalent  . In this guide you will learn when and how to use it, how it differs from a regular space, and when a CSS rule is the better choice.

Why Do We Use Non-Breaking Spaces?

When working with text, a regular space (the spacebar character) allows browsers to wrap a line at any space if the container is too narrow. That is usually the right behavior. But some text pairs should never be split across two lines because splitting them harms readability or meaning.

Common examples where a line break would look wrong:

• A number and its unit: 10 km, $99.99, 3 GHz
• A first and last name: John Smith
• A date: March 12
• An abbreviation and its context: Mr. Johnson, No. 5

If a regular space is used, 10 could appear on one line and km on the next. An NBSP prevents that split.

How to Use NBSP in HTML

In HTML, write the entity   wherever you want a non-breaking space:

<p>The file size is 4.5 MB.</p>
<p>Contact us for details.</p>

You can also use the numeric entity   , both produce the same character. The named entity   is more readable, so it is the standard choice.

Related entities for wider spaces:   (en-space, half an em wide) and   (em-space, one em wide). These also prevent line breaks but add more horizontal space. Use them only for typographic reasons, not for layout.

How to Type NBSP

You can insert a non-breaking space without typing the entity code by using keyboard shortcuts:

• Windows: Alt + 0160 on the numeric keypad
• Mac: Option + Space
• Linux (GTK apps): Ctrl + Shift + U, then type 00A0, then press Enter

These shortcuts work in most text editors, design tools, and word processors. In code editors, typing the entity   directly is cleaner and more explicit.

NBSP vs Regular Space: Key Differences

The table below summarizes how the two characters behave:

NBSP in CSS: When to Use white-space: nowrap Instead

For short, specific pairs of text,   in HTML is perfectly fine. However, if you need to prevent wrapping across an entire element or a larger block, a CSS rule is the cleaner solution.

The white-space: nowrap property tells the browser not to wrap the text inside an element at all:

.no-wrap {
  white-space: nowrap;
}

<span class="no-wrap">10 km</span>

Use white-space: nowrap when the no-wrap behavior applies to a whole component or when the text is dynamically generated and you cannot control the HTML. Use   when you need to control a single space in a specific sentence within a static template.

Another rule to know is word-break: keep-all, which is useful for CJK (Chinese, Japanese, Korean) text where word boundaries work differently.

NBSP in Email Templates

Email clients have inconsistent rendering engines, and NBSP behaves slightly differently from one client to another. A few practical guidelines:

• Use   for units and names, just as you would in HTML. Most clients respect it.
• Avoid stacking multiple   entities to create indentation. This is unreliable across clients. Use padding or margin on table cells instead.
• Outlook on Windows sometimes collapses or ignores CSS spacing, making   a more reliable fallback for keeping short pairs together.
• Test in multiple clients (Gmail, Apple Mail, Outlook) because rendering varies. Tools like Litmus or Email on Acid help here.

Common Mistakes When Using NBSP

Using multiple   to create indentation or wide gaps. This is the most common misuse. Code like     before a paragraph is fragile, hard to maintain, and semantically wrong. Use padding-left or margin-left in CSS instead.

Adding NBSP after every number-unit pair manually in a CMS. If your site generates dozens of articles with measurements, add a content filter or a typography plugin that inserts NBSP automatically (for example, a WordPress plugin like WP Typography).

Pasting content that contains hidden NBSP characters. When you copy text from a word processor (Microsoft Word, Google Docs), hidden non-breaking spaces often come along. These can cause surprising layout differences on your site. Always paste into a plain-text editor first, or use a paste as plain text option.

NBSP and Accessibility

Screen readers handle NBSP in different ways depending on the software. Most modern screen readers (NVDA, JAWS, VoiceOver) treat a single NBSP as a word boundary, similar to a regular space, so one NBSP in a number-unit pair like 10 km is not a problem for accessibility.

However, stacking multiple NBSP characters creates ambiguity. Some screen readers announce each one, resulting in choppy or confusing audio for users who rely on assistive technology. This is another reason to prefer CSS padding and margin for visual spacing over repeated   entities.

If you are creating accessible content, always prefer semantic HTML and CSS for layout, and reserve NBSP only for its original purpose: preventing an unwanted line break at a single specific position.