Show white space at the beginning of a text in HTML

Question

How do I display white space at the beginning of text in HTML?

For example, I want to use

<p>             This is a paragraph.</p> //             This is a paragraph. 

But it behaves exactly like

<p>This is a paragraph.</p>

How I can do this?

Answer 1

You can use white-space: pre; property in CSS which doesn't collapse spaces:

    p {
    	white-space: pre;
    	color: black;
    	background: pink;
    }

    <p>             This is a paragraph.</p>

Answer 2

If you have to have spaces you can use  , so code would look like:

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is a paragraph.</p>

For 5 spaces. Though I think you may be best using css to add padding / margin styling to achieve what you are after.

EDIT

Snippet added using padding method:

p.padded {
  padding:.3em .5em .1em 2em;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptas, culpa, quam, totam ex illum earum cupiditate, odit delectus cum atque dignissimos. Culpa praesentium perspiciatis incidunt pariatur. Doloremque, illum, sequi.</p>

<p class="padded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptas, culpa, quam, totam ex illum earum cupiditate, odit delectus cum atque dignissimos. Culpa praesentium perspiciatis incidunt pariatur. Doloremque, illum, sequi.</p>