Sams Teach Yourself CSS in 10 Minutes

At present, the image sits hard against the edge of its container, the <div> element. To give it some space, you can set margins on the top and left using margin: 10px 0 0 10px.

You can also add a border to the image using border: 1px solid #777 as shown in Listing 12.4. The results can be seen in Figure 12.3.

Listing 12.4. CSS Code for Styling the Image

div.thumbnail { width: 130px; float: left; margin: 0 10px 10px 0; background: url(chapter12a.gif) no-repeat; } div.thumbnail img { margin: 10px 0 0 10px; border: 1px solid #777; }