1. Technology

Spacing Out Your HTML

Creating White Space on a Web Page


Man looking at computer screen
Ippei Naoi/Moment/Getty Images

If you're used to writing in a word processor, HTML appears to be arbitrary with white space. You can't indent text with straight HTML and table cells won't stay open if there's nothing in them.

How HTML Interprets White Space

White space in HTML is handled differently than it's handled in word processors. Web browsers "condense" white space in HTML. This means that when a Web page interprets HTML it will display one space (" ") exactly the same as multiple spaces (" "). View the HTML source here, and you'll see that I put 6 spaces in between the second set of quotes, but your browser rendered it exactly the same as the first set of quotes with only one space.

And this doesn't apply just to spaces - Web browsers condense any white space characters, including spaces, tabs, and carriage returns (newlines).

So how do you get white space on your Web pages? There are several ways:

The Non-Breaking Space ( )

The non-breaking space is a character entity recognized by browsers as white space that you want to display on the page. It isn't much more space than would be taken up by a space between words, but often it is all you need.

Table cells can look pretty strange if you don't use the non-breaking space to hold them open.

Cells without the   can disappear. If a table column has nothin in it or only white space characters in the cells, some browsers will collapse the column down to nothing (even if you set a width).

You can also use the non-breaking space to indent text and images a small amount. It's not a good idea to use a lot in a row, as older browsers don't support more than one at a time. For example:

     However, if your audience doesn't use older browsers, you can use 4 or 5 in a row to get an indent for a new paragraph of text.

<p>     However, if your audience doesn't use older browsers, ...

These days, it's better to set margins on the first-line of your paragraphs using CSS rather than the non-breaking space.

The Single Pixel GIF Trick

First documented by David Siegel, this trick uses a transparent GIF image that is 1 pixel square. You take that image and stretch it out to force your HTML to lay the way you want it to.

You can use it for indenting text. Just set the hspace or the right and left margins to half of the space you want indented. Essentially, you get 1 + 2n pixels of white space (where n = hspace) without increasing either the download or the rendering time. You can do the same with vspace to create double spaced text and other effects. For example:

<p><img src="spacer.gif" alt=" " width="1" height="1" style="margin-right: 5px; margin-left: 5px;" />This paragraph is indented 11 pixels.

In order to use the single pixel GIF, download it to your hard drive (hold down the shift button while you click on the link), and add it to your HTML. The single pixel transparent GIF.

Learn how to add images to your Web pages

Just like the non-breaking space, these days, it's better to use the text-indent property on the first-line of your paragraphs using CSS rather than a single-pixel GIF.

©2014 About.com. All rights reserved.