1. Technology

Spaces in HTML

HTML Blank Spaces - Whitespace in HTML


PhotoAlto/Eric Audras/PhotoAlto Agency RF Collections/Getty Images

Spaces in HTML can be difficult to understand for the novice web designer, because whether you type 1 space or 100 in your HTML, the web browser automatically collapses those spaces down to just one. So, how do you add spaces in HTML that show up on the web page? There are many different ways:

Spaces in HTML: The Best Way

The best way to add spaces in your HTML is with CSS. You can use the margin or padding properties to add space around elements. Plus the text-indent property adds space to the front of text, such as for indenting paragraphs.

Here is an example of how to use CSS to add space in front of all of your paragraphs. Add the following CSS to your external or internal style sheet:

p {
  text-indent: 3em;

Spaces in HTML: Inside Your Text

If you just want to add an additional space or two to your text, you can use the non-breaking space. This character acts just like a standard space character, only it does not collapse inside the browser.

Here is an example of how to add 5 spaces inside a line of text:

This text has     five extra spaces inside it

Uses the HTML:

<p>This text has&#160;&#160;&#160;&#160;&#160;five extra spaces inside it</p>

You can also use the <br> tag to add extra line breaks. But it is much better to use the margin or padding CSS properties if you can. For example:

<p>This sentence has <br><br><br><br><br>five line breaks in the middle of it</p>
<p style="margin-bottom:2.5em;">This paragraph has a bottom margin of 2.5em.</p>

©2014 About.com. All rights reserved.