Web Design in a Nutshell, 3rd Edition

Adding space around aligned images

When text flows around an image, browsers allow it to bump up against the image’s edge. Usually, it is preferable to have a little space between the image and the surrounding text. In HTML, you provide this space by using the vspace and hspace attributes within the img element.

Figure 12-5. Text wraps around floated images

Right Alignment Without Text Wrap

Using the align="right" attribute to place an image against the right margin automatically results in text wrapping around the image. If you want to move an image to the right without the wrap, put the image in a paragraph (p), and then align the paragraph to the right, as shown:

<p align="right"><img src="leaf.gif" alt="" /></p>
<p>An Oak and a Reed were arguing...</p>

In CSS, to align an element with no text wrap, apply the text-align property to a block-level element that contains the image.

The vspace (vertical space) attribute holds a specified number of pixels of space above and below an aligned image. Space to the left and the right is added with hspace (horizontal space). Note that space is always added symmetrically (both top and bottom, or on both sides), and it is not possible with these attributes to specify an amount of space along a particular side of the image (you can, however, do this with style sheets). Figure 12-6 shows an image aligned with the hspace attribute set to 12.

Figure 12-6. Image ...