How to add blank space in HTML – examples and sample code

If you just add spaces in your HTML code, it won’t directly display that space when viewed in the browser. The browser will just consolidate the space into one space.

However, you want to add blank space for clarity and brevity of the text. How to add space in HTML?

The answer depends what you want to present. Depending on the case, use one of the methods below.

By the way, the correct way to address presentation on a web page is to use the right CSS code. So we will be using CSS for the solutions.

You want to add space between all the words in a paragraph

Use the word-spacing CSS property.

p.spaced
{
 word-spacing: 1.3em;
}
<p class="spaced">
Sed vulputate nisi ex, sit amet ornare est 
volutpat vitae. Pellentesque habitant
morbi tristique senectus et netus et
</p>

word spacing example

You want to increase space between the lines

Use line-height

p.spacedlines
{
 line-height: 150%;
}
<p class="spacedlines">
  Sed vulputate nisi ex, sit amet ornare 
  est volutpat vitae. Pellentesque 
</p>

line height example

You just want to add some padding before a block of text

Use CSS property padding. padding can be added to the left, right, top or bottom. In the example below, we add padding to the left side of the paragraph.

p.padded
{
 padding-left:10px;
}
<p class="padded">
Sed vulputate nisi ex, sit amet ornare est volutpat vitae. 
Pellentesque habitant
</p>

space using padding

You want to add space before or after some words in a paragraph

space word padding

In case you want to add space before certain words only (not all words), then the right solution would be to add some padding to those words.

span.highlighted-word
{
 padding-left:5px;
 padding-right:5px;
 color:red;
}
<p >
Sed vulputate nisi ex, sit amet ornare est 
<span class="highlighted-word">volutpat vitae</span>. 
Pellentesque habitant
morbi tristique senectus et netus et malesuada 
fames ac turpis egestas.
Mauris sed diam dapibus, 
<span class="highlighted-word">vestibulum neque</span> vel, 
aliquam lectus.
</p>

Add space before first line in a paragraph

Text indent

The text indent adds space to the first line of the block of text.

.indented
{
 text-indent: 55px;
}
<p class="indented">
Sed vulputate nisi ex, sit amet ornare est 
volutpat vitae. Pellentesque habitant
morbi tristique senectus et netus et 
malesuada fames ac turpis egestas.
Mauris sed diam dapibus, vestibulum neque 
vel, aliquam lectus.
</p>

Show the text exactly as you typed in – with so many spaces and lines

HTML spacing using pre tag

If you want to display the text exactly as you have typed – with the spaces and the new lines,
use the <pre> tag.

The pre tag is especially useful for pre-formatted text like poems or source code.

.poem
{
 font-family: sans-serif ;
}
<pre class="poem">
  Pretty women wonder where my secret lies.
  I'm not cute or built to suit a fashion model's size
  But when I start to tell them,
  They think I'm telling lies.

    I say,
    It's in the reach of my arms
    The span of my hips,
    The stride of my step,
    The curl of my lips.

  I'm a woman
  Phenomenally.
  Phenomenal woman,
  That's me.
                   [Maya Angelou]
</pre>

By default, browsers will format pre text using a different font. We override the font using CSS code as shown in the sample code above.

The ugly hack &nbsp;

To make this article, complete, I have to mention this method also. If you just want to add one space with out using any of these techniques, use &nbsp; that is special HTML entity for adding non breaking space.
For example:

 some text  &nbsp; some more text

That code results in:
HTML space using nbsp

Read more on better Text formating

Close

Copy and paste this code to display the image on your site

Copied!