HTML and CSS Reference
Figure 7-2. You can't control the individual margins around images with HTML attributes
Using the align , hspace , and vspace attributes is no longer permitted in HTML5. Even if that weren't the
case, CSS gives you much greater control, because you can adjust the margins independently on each side of the
image. I usually add the following class definitions to my style sheet:
margin: 3px 10px 3px 0;
margin: 3px 0 3px 10px;
This adds a 3px margin to the top and bottom of the image and a 10px margin between the image and
surrounding text. Both classes use the margin shorthand property, which lists the values in clockwise order
starting from the top. So, the 10px in the floatleft class represents the right margin, and in the floatright class,
it's the left margin.
To align an image on the left, just add the floatleft class to the <img> tag like this:
<p><img src="images/nice seafront.jpg" alt="Nice seafront" width="400" height="266"
class="floatleft" >Tear yourself away. . . </p>
As Figure 7-3 shows, the left edge of the image in floatleft.html remains flush with the main body of the text,
but there's a small gap on the right between the image and the text.