The   Mystery: Why Non-Breaking Spaces Are Misunderstood

What Is a Non-Breaking Space?

The non-breaking space (Unicode U+00A0, HTML entity  ) is a space character with one critical difference from a regular space: it prevents line breaking. Where a regular space allows text to wrap at that point, a non-breaking space forces the characters on either side to stay on the same line.

The concept predates the web by decades — non-breaking spaces appeared in typography software of the 1980s and in word processors that needed to keep certain word pairs together (like "Mr. Smith" or "10 km") on the same line. HTML inherited the concept when it was designed, giving the character the entity name  .

The Character's Unicode Identity

The non-breaking space is Unicode code point U+00A0. In HTML, it can be written three ways:

• Named entity:  
• Decimal numeric entity:  
• Hexadecimal numeric entity:  
• The literal character: a space-looking character that is actually U+00A0, indistinguishable from a regular space when editing in most text editors

The literal form is why non-breaking spaces cause so many mysterious bugs: they look identical to regular spaces in most contexts, but are parsed differently. A string comparison, a split-by-whitespace operation, or a word count algorithm may produce unexpected results when non-breaking spaces are present in data.

When   Is the Right Tool

Non-breaking spaces are correct in exactly two kinds of situations:

1. Preventing Awkward Line Breaks

The original and correct use: preventing line breaks between words or characters that should stay together. Examples:

• Number and unit: "10 km" prevents "10" and "km" appearing on separate lines
• Title and name: "Mr. Smith" keeps the honorific with the name
• Currency: "$ 1,000" keeps the currency symbol attached
• Section references: "Section 4.2" keeps the full reference together

In these cases, wrapping at the space would create visually awkward or semantically confusing text — a lone "10" at the end of a line with "km" starting the next. The non-breaking space correctly prevents this.

2. Minimum Content in a Table Cell

In some browsers and CSS contexts, empty table cells collapse visually or render incorrectly. Placing a   in an otherwise-empty table cell provides minimum content that prevents cell collapse without adding visible text. This is a legacy technique — modern CSS handles this better — but it remains in use in older codebases.

When   Is Not the Right Tool

Despite its frequent use for spacing,   is the wrong tool for almost all spacing needs:

Adding Horizontal Space

The most common misuse: developers add multiple   entities to create horizontal spacing between elements. This is a holdover from early web development when CSS was limited. Modern CSS provides many better alternatives:

• padding and margin for element spacing
• gap in flexbox and grid layouts
• letter-spacing for character spacing in text
• word-spacing for word spacing in text

Using   for spacing creates semantic problems (it is parsed as text content, not as layout), accessibility problems (screen readers may read it as "space"), and maintenance problems (spacing specified in HTML rather than CSS is harder to update consistently).

Indentation

Some developers use      (four entities) to create indentation. This predates CSS and should never appear in modern code. CSS padding-left, margin-left, or text-indent are all semantically correct and vastly more maintainable.

Preventing Paragraph Collapse

A common practice was placing   in empty paragraph tags (<p>&nbsp;</p>) to force vertical spacing between elements. This is incorrect — CSS margin on elements is the right way to create vertical spacing. The   in an empty paragraph is meaningless content, and the empty paragraph itself is semantically wrong.

The Accessibility Problem

Screen readers handle non-breaking spaces inconsistently. Some read each   as "space," "non-breaking space," or produce a pause. Multiple sequential   entities used for layout can be read as "space space space space" — confusing and annoying for users who rely on screen readers.

This is the strongest argument against using   for spacing: beyond the code quality problems, it actively harms accessibility for users who cannot see the visual result and hear the entity read aloud instead.

The Right Way to Space in HTML/CSS

A brief summary of modern alternatives:

The Invisible Bug

One practical problem with non-breaking spaces: they are visually identical to regular spaces in most contexts. A non-breaking space in a database field, a JSON string, or a configuration value looks like a regular space but is not. Operations that split on whitespace, compare strings, or URL-encode data may behave unexpectedly with U+00A0.

If you encounter mysterious string comparison failures or whitespace-handling bugs, checking for non-breaking spaces (and other unusual Unicode whitespace characters like the thin space U+2009 or zero-width space U+200B) is worth adding to your debugging checklist.

Encode HTML entities →