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