Providing a Margin on Only One Side of a Picture

The hspace attribute can be used to provide some space between a picture and text where one is using the align attribute of the image tag. Without this, text goes right up against a picture, which generally looks too cramped.

We have now added hspace=15, which provides 15 pixels of space on both the left and right sides of the picture. But in this case, we really don't need the extra space on the left side of the picture, only the right. One solution of course is to use tables, and put the image in one cell and the text in another, with use of cellpadding or cellspacing to achieve the proper spacing. But using tables won't permit the text to wrap under the picture, as does the align attribute.

Now we are using the CSS margin-right property to apply to this image. Now we get 15 pixels of space on the right, but don't get it on the left. However in Netscape 4, if we try to apply the margin property directly to the img tag, the text will actually overlap the image as shown here.

Now we are using the CSS margin-left property to the text rather than the image. This produces the desired effect in Netscape 4, but in Netscape 6.2 and IE, the margin only applies to the first line of the text.