Blank Space Character HTML 2026

Complete HTML Spacing Reference (2026)

Here are the most useful HTML entities and Unicode characters for spacing, with their width and typical use case:

Rule of thumb: use   for anything that needs to be readable, accessible, and survive across CMS platforms and email clients. Reach for Unicode codes like ㅤ only when you specifically need a hidden/invisible character, and test thoroughly.

HTML Blank Space Compatibility Guide

CSS Unicode Escape Codes

In stylesheets and CSS-generated content (like content: "\\..."), you'll often need Unicode escape sequences rather than HTML entities:

.label::after {
  content: "\0000A0";
}

.no-wrap-join {
  content: "\2060";
}

Best Practices for HTML Blank Spaces

Using Blank Spaces in JSX / React

One thing most HTML guides don't cover: writing   directly inside JSX doesn't work the way it does in plain HTML. JSX treats   as literal text — React renders the characters   on the page instead of a space, because JSX doesn't parse HTML entities the same way an .html file does. This is a common reason a spacing fix that works in a static HTML file breaks silently after being ported into a React component.

The fix is to use the actual Unicode escape inside a JavaScript expression, since JSX expressions inside curly braces are parsed as JavaScript, not HTML:

// Wrong — renders the literal text " " on screen
<p>Price:&nbsp;$29.99</p>

// Right — renders an actual non-breaking space
<p>Price:{'\u00A0'}$29.99</p>

// Also works — JSX text content can include a raw Unicode char directly
<p>Price:{" "}$29.99</p>

Based on how JSX whitespace rules work, another detail worth knowing is that JSX collapses whitespace between elements on separate lines by default — similar to HTML, but with its own specific rules around newlines and indentation. A non-breaking space inside a template literal or string is not affected by this collapsing, since it's treated as a JavaScript string value rather than raw JSX whitespace.

For Tailwind-based projects (as used throughout this site), CSS-based spacing — gap, space-x-*, mr-* — is generally preferable to inline Unicode characters for layout spacing, and the Unicode escape approach above should be reserved for cases where a literal non-breaking character inside text content is specifically needed, such as preventing a price and currency symbol from wrapping onto separate lines.

CSS white-space — Full Property Comparison

The article above uses white-space: pre for a couple of examples, but that's only one of six values this property accepts. Based on how each value handles collapsing and wrapping differently, picking the right one avoids reaching for   entities in cases where a single CSS rule would do the same job more reliably.

pre-line is the one most often overlooked: it's the closest CSS equivalent to how Markdown-style line breaks behave, since it respects newline characters in the source while still collapsing repeated spaces and allowing normal responsive wrapping — often a better fit than pre-wrap for rendering user-submitted comments or descriptions that include line breaks.