Styling the Image

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.