ptg16476052Images and Text 2139
Output ▼
Adjusting the Space Around Images
With the capability to wrap text around an image, you also might want to add some space
between the image and the text that surrounds it. In the previous lesson, you learned how
to manage the whitespace around elements using CSS padding and margins. Images are
like any other element when it comes to adding white space around them—you can use
the margin and padding style properties with them.
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 how to add whitespace using padding. Both images are floated to the left.
As you can see, the text next to the bottom image is a ligned with the top of the padding,
not the image itself.
Input ▼
This is an eggplant. We intend to stay a good ways away
f rom it, because we really don't like eggplant very much.
This is an eggplant. We intend to stay a good ways away
from it, because we really don't like eggplant very much.
FIGURE 9.9
Line break to a
clear margin.