HTML - how to make two or more spaces inside div

3 points
Created by:

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 &nbsp; 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;

  Both  spaces    and line breaks
  will be preserved

2. Using &nbsp; example

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

// ONLINE-RUNNER:browser;

  Some&nbsp;&nbsp;&nbsp;&nbsp;text 1
  Some&nbsp;&nbsp;&nbsp;&nbsp;text 2
  Some&nbsp;&nbsp;&nbsp;&nbsp;text 3

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

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

See also

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

Alternative titles

  1. HTML - how to make multiple white spaces inside div
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.


Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā