Adding Space around an Image

Look carefully at the image in Figure 5.31. If you don't want your text butting right up to the image, you can use the deprecated vspace and hspace attributes to add a buffer around your image.

Figure 5.31. No space is left, by default, between floating images and the elements they float next to.

To add space around an image:

1.	Type <img src="/books/2/62/1/html/2/image.location" where image.location indicates the location on the server of your image.
2.	If desired, type hspace="x" where x is the number of pixels of space to add on both the right and left sides of the image.
3.	If desired, type vspace="x" where x is the number of pixels of space to add on both the top and bottom of the image.
4.	Add other image attributes as desired and type the final />.

Figure 5.32. You can add horizontal space or vertical space, or both, to your images.

Tips

• You don't have to add both hspace and vspace at the same time.

• Both hspace and vspace are deprecated in favor of style sheets which are much more powerful and flexible. For information about using styles to control the space around your images, consult Setting the Margins around an Element on page 176 and Adding Padding around an Element on page 177.

  Figure 5.33. One big limitation of hspace and vspace is that they add space to both sides of an image. Note, for example, that the photo is no longer aligned with the left edge of the text.

  

• The worst part about hspace and vspace is that you can't add space to just one side. This is a perfect example where styles really are worth the extra trouble.

• If you just want to add space to one side of the image, you could use Photoshop to add blank space to that side, and skip hspace and vspace altogether. Then, make the blank space transparent.