HTML and Whitespace

One thing that anyone who has worked with the HTML for their web page will notice is that no matter how much space you leave between your content in the HTML, when it is displayed all that space is reduced down to a single space. The reason for this is that HTML is intended to define the content of the page and not how it looks. Any space in the HTML is considered to be there to make the page source easier to read rather than it having any effect on the way the page looks.

The main way that you apply whitespace between the elements of your page is via the CSS that you attach to the page. Each block element in your web page can have margins and padding applied to it that will determine how much whitespace appears between that block of content and any surrounding content.

CSS also provide you with other ways to adjust the whitespace around and between your content. You can code your CSS to indent the first line of a block of content (the way a lot of places work their paragraphs). You can even adjust the word spacing and even the letter spacing using CSS so as to position the letters exactly how you want them to appear relative to one another. Adjusting the lineheight from the CSS determines how much space gets left between each of the lines of content.

In fact the ability of CSS to adjust the whitespace around and between the HTML content of your web page is such that you will almost never need to use any of the techniques that HTML does provide for adjusting the spacing of the content.

There are two situations where you will want to use an HTML technique for controlling the spacing.

The first of these is where you have a single space between two words where there is a requirement that those two words always appear next to one another with just a single space between them. Since the normal space character is considered to be a spot where the browser is allowed to decide to start a new line if the next word will not fit the available space we need to substitute a special non-breaking space if we want to force the two words to be kept together. A non-breaking space is entered into the HTML using the entity code  

The second of these is where we are displaying code or similar on the web page where the exact formatting of the original needs to be retained. To cover this situation the simplest solution is to wrap the entire code content inside of <pre><code> </code><pre> tags which will force the content to be displayed in a monospaced font (such as Courier) with all of the spacing left intact.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow