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 


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.

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