HTML - how to make two or more spaces inside div

In this article we would like to show you how to make two or more spaces inside div element in HTML.

There are three ways to do this:

1. By wrapping your text in a <pre> tag,
2. By using   instead of space characters - Non-Breaking Space (check definition here),
3. By white-space style property - CSS.

Check below practical examples.

1. Using <pre> tag example

pre tag was defined to let display text like plain/text is diplayed - with keeping tabs, spaces, etc.

// ONLINE-RUNNER:browser;

<div>
  <pre>
  Both  spaces    and line breaks
  will be preserved
  </pre>
<div>

2. Using   example

In below example we are using   characters instead of spaces. nbsp means Non-Breaking Space. Instead   we can use   quivalent that means same - it is just numerical code.

// ONLINE-RUNNER:browser;

<div>Some&nbsp;&nbsp;&nbsp;&nbsp;text<div>
<div>
  Some&nbsp;&nbsp;&nbsp;&nbsp;text 1
  Some&nbsp;&nbsp;&nbsp;&nbsp;text 2
  Some&nbsp;&nbsp;&nbsp;&nbsp;text 3
<div>

3. Using CSS example

Below example shows how to add inline style to our <div> tag, so we can use multiple spaces inside it.

Note: that approach keeps new lines and tab characters too.

// ONLINE-RUNNER:browser;

<div style="white-space: pre;">Some     text</div>
<div style="white-space: pre;">
  Some     text 1
  Some     text 2
  Some     text 3
</div>

Note: Click here to read more about white-space property.

See also

1. JavaScript - no-break/non-breaking space in string