Styling the <image> Element

Styling the <image> Element

The image should be set to display: block. This will remove any gaps that appear below it and force the <h1> border-bottom to sit up against it.

The image is nested inside an <a> element. In some browsers this will cause the image to display with a 2-pixel-wide border. To avoid this, the image should be styled with border: 0 as shown in Listing 18.6. The results can be seen in Figure 18.4.

Listing 18.6. CSS Code for Styling the <image> Element

body
{
    margin: 0;
    padding: 0;
    text-align: center;
    font: 85% arial, helvetica, sans-serif;
    background: #B0BFC2;
    color: #444;
}

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF;
}

h1
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
}

h1 img
{
    display: block;
    border: 0;
}

Figure 18.4. Screenshot of styled <image> element.