Maddog's HTML Primer for Real People

Chapter 6, Lesson 9

Ch 6, L 9 - Space Around the Image

If you already know how to add space around an image, you can skip this lesson.

In a previous lesson, we saw how we could attach a text caption to an image, or have text wrap-around an image. When it did, did you notice how close the text got to the image? That's right, ve-r-r-ry close. HTML gives us two optional attributes for use inside the 'IMG' tag which allow a clear space on either side of, or above and below an image. This allows a little more pleasing presentation.

If you would like to specify a little vertical space (that is, above and below the image), use the 'VSPACE' attribute to do so. Assign an attribute value equal to the number of pixels of space you want around the image. Follow this format:

Follow the usual rules about whitespace with embedded attributes, and don't use quotation marks around the attribute value. For example, if you wanted a vertical space of 12 pixels around the image (a typical value), do this:

If you would like to specify a little horizontal space (that is, to the left and right of the image), use the 'HSPACE' attribute to do so. Follow this format:

If you want to specify a space all the way around the image, use both attributes inside the 'IMG' tag, like so:

Let's examine some source code:

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
<IMG SRC="saturn0.gif" ALIGN=LEFT VSPACE=25>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
<IMG SRC="saturn0.gif" ALIGN=RIGHT HSPACE=25>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
<IMG SRC="saturn0.gif" ALIGN=LEFT VSPACE=25 HSPACE=25>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
If that danged lazy dawg of yours don't get off my property, I'm gonna have to sic that fool brown fox on it.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. If that danged lazy dawg of yours don't get off my property, I'm gonna have to sic that fool brown fox on it

In the demonstration, the first image specifies a 'VSPACE' of 25 pixels. Notive that the text wrapping down the side of the image is very close to it, but above and below the image is a clear space.

The second image specifies an 'HSPACE' of 25 pixels. Notice that the text wrapping down the side of the image is now spaced away from the image, but above and below the image there is very little clearance.

The third image specifies both a 'VSPACE' and an 'HSPACE' of 25 pixels. We can clearly see here that there is a text-free space all the way around the image.

Overseer: Monty Northrup ...

... leave e-mail ...