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>
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>
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>
You want to add space before or after some words in a paragraph
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
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
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
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 that is special HTML entity for adding non breaking space.
For example:
some text some more text
That code results in:
