HTML / How to insert multiple spaces with NBSP and white-space

To display multiple spaces in HTML, use   for a short sequence or CSS white-space: pre-wrap to preserve spaces and line breaks in text. Choose carefully:   also prevents ordinary wrapping at that position. For spacing between buttons or navigation items, use CSS gap or margin.

Why repeated spaces appear as one space

With the usual white-space: normal setting, consecutive ordinary spaces and tabs between words collapse for display. Indentation and newlines in HTML source do not directly define visual spacing. A source newline does not always turn into one visible space: its treatment can depend on the language and context.

Paste this complete example into a text editor, save it as spaces.html using UTF-8, and open the file in a browser. No library or server is required. After editing, save and refresh the browser. The sample words use Latin letters so the differences are easy to compare.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML whitespace comparison</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>HTML whitespace comparison</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

In the normal paragraph, the source contains three spaces and then seven spaces between Alpha, Beta and Gamma, but each sequence normally appears as one space. Select the paragraph in developer tools and inspect its computed white-space value. This distinguishes characters in the source from whitespace collapsing during rendering.

Insert non-breaking space characters

  is an HTML character reference for a non-breaking space, U+00A0. Writing it three times inserts three characters that do not collapse like consecutive ordinary spaces. It can also keep a number and its unit together.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

The first paragraph places three non-breaking spaces between Alpha and Beta. In the second paragraph, 10 kg prevents an ordinary line break between the number and unit. The actual width depends on the font and font size; three spaces do not have a fixed width in pixels.

Connecting a whole sentence with many non-breaking spaces reduces wrapping opportunities and can cause overflow on a narrow screen. Copied text also contains a different character from an ordinary space, U+0020, which can affect searches and string comparisons. Avoid repeating these characters to align content or create indentation.

Preserve spaces and line breaks with white-space

When repeated spaces and explicit line breaks are meaningful parts of the text, apply white-space: pre-wrap to that element. It preserves both while allowing additional wrapping to fit the available width. This does not guarantee that a long unbroken URL or word will fit inside the box.

In the complete example, both pre-wrap and pre retain the three spaces between Alpha and Beta and the newline before Gamma. Narrow the window: pre-wrap permits additional wrapping, while pre does not. The example uses overflow-x: auto to make the latter scroll horizontally. With pre-line, explicit line breaks remain but consecutive spaces between words collapse.

This table summarizes the common text-processing differences. It does not imply that details such as tab width or end-of-line spaces behave identically. Also check inherited values and other CSS rules. W3C definition of white-space

Use CSS for spacing between elements

To separate two buttons, make their parent a flex container and set gap instead of adding text spaces. Use margin for spacing outside an element and padding between its border and content. Space characters belong to the content; CSS spacing controls layout.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

In the complete example, the A and B buttons are separated by gap: 1rem. A rem is based on the root element’s font size, so it is not always 16 pixels. If there is insufficient width, flex-wrap: wrap lets a button move to the next line. Keeping everything else unchanged, set only gap to 0, compare the result, and restore 1rem.

What to check when the result differs

1. If the literal text   appears, check that you are editing HTML. Pasting it as text into a visual editor, or escaping it twice as  , prevents it from becoming a space.
2. If spaces or line breaks disappear, inspect the paragraph’s computed white-space value and confirm that the CSS selector matches. Source indentation inside a pre-wrap element can also become visible, so remove unintended whitespace.
3. If content overflows on mobile, narrow the window and look for repeated non-breaking spaces or a pre setting. Depending on the purpose, replace them with ordinary spaces or use pre-wrap. Check again at a wider width after making the change.

To show the spelling   in an explanation rather than insert a space, write   in the HTML source. The standard lists the character references and their corresponding characters. WHATWG HTML character reference list