Styling the Image

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; } 

Figure 12.3. Screenshot of styled image.