HTML and CSS Reference
In-Depth Information
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:
floatleft {
float: left;
margin: 3px 10px 3px 0;
}
.floatright {
float: right;
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.
