Cherryfield.netVertical Spacing Tricks

Standard ways of getting vertical space between lines:

If they are paragraphs, put each paragraph in its own <P>...</P> tags.

Inside a table (where <P> is really not allowed) or even inside a paragraph, one normally creates a blank line using: <BR>&nbsp;<BR> (note that the non-breaking space is important because some browsers will ignore a totally blank line).

Problem 1: If you use <BR>&nbsp;<BR> inside <LI> ... </LI> tags the space between the two lines is greater than the space between the elements of the list. Here's an example:

This is the first line of a numbered list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

This is the second line of the list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

Now we'll add some more text to this list element which we want to appear in it's own paragraph. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

This is the last line of the list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

Most browsers will put more space between the two paragraphs of list item 2 than between the items of the list. (This is because you usually want less than a full blank line vertical spacing between list elements.) Here are two tricks to reduce the amount of space above the new paragraph in list item 2:

Trick 1: Instead of putting a &nbsp; on the blank line, put a little transparent image. (Editor's note: this trick doesn't shrink the space in Internet Explorer, but you can use it to expand space.) All you need is little, empty transparent image (less than 200 bytes) which you can shrink or stretch to any height using the HEIGHT attribute of the IMG element. Here's the same example with the &nbsp; replaced by <IMG SRC="transimg.gif" HEIGHT=3 WIDTH=10 ALT="">:

This is the first line of a numbered list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

This is the second line of the list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.
Now we'll add some more text to this list element which we want to appear in it's own paragraph. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

This is the last line of the list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

By adjusting the height of the image (specified in pixels) you can get exactly the spacing you want.

Trick 2: Instead of creating the vertical space by using two <BR>s with only a non-breaking space, or a little image, use a single <BR> and in the next line of text replace a space with:

<FONT SIZE="+2">&nbsp;</FONT>

where the font size you choose is greater than the current font size. This works because the browser adjusts the distance between the baseline of the two lines to account for the largest type on the second line; however, since the only large type on the second line is a blank space, one just sees extra space between the lines. One advantage of this trick is that since you allow the browser to control the spacing it probably works even better than trick 1 if the user has requested the browser to use larger type for easier reading.

This is the first line of a numbered list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

This is the second line of the list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.
Now we'll add some more text to this list element which we want to appear in it's own paragraph. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

This is the last line of the list. We'll add some text so it will wrap onto two or three lines... The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.

One subtle issue associated with this trick is where to put the bigger space. In the example above, it appears after the words "more text". You want to put it somewhere it won't be noticed, but you need to be sure it appears near enough to the beginning of the line that so it won't end up on the next line when viewed in a very narrow browser window.