Languages
[Edit]
EN

HTML - how to make two or more spaces inside div

3 points
Created by:
Dirask Community
5850

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;

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

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;

<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 

HTML

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.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join