HTML and CSS Reference
In-Depth Information
The following HTML code, displayed in Figure 9.10, illustrates two examples. The
upper example shows default horizontal and vertical spacing around the image, and the
lower example shows the effect produced by the
hspace
and
vspace
attributes. Both
images use the
align=“left”
attribute so that the text wraps along the left side of the
image. However, in the bottom example, the text aligns with the extra space above the
top of the image (added with the
vspace
attribute).
Input
▼
<p><img src=”eggplant.gif” align=”left” /></p>
<p>
This is an eggplant. We intend to stay a good ways away
from it, because we really don't like eggplant very much.
</p>
<p style=”clear: left”>
<img src=”eggplant.gif” vspace=”50” hspace=”50” align=”left” />
</p>
<p>
This is an eggplant. We intend to stay a good ways away
from it, because we really don't like eggplant very much.
</p>
9
.
Output
FIGURE 9.10
The upper exam-
ple doesn't have
image spacing,
and the lower
example does.
Here's the same example, written using CSS instead:
<img src=“eggplant.gif” alt=“Eggplant” style=”float: left” />
<p>
This is an eggplant. We intend to stay a good ways away from
it, because we really don't like eggplant very much.
</p>
<hr style=”clear: left” />
