Languages
[Edit]
EN

HTML - how to make two or more spaces inside div

3 points
Created by:
Vanessa-Drake
418

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