Web designers, especially those who work with CSS and XHTML understand the importance of pixel-level control. Page layouts are often done with pixel precision. That's why when the page rendering deviates from the designer's expectations based on the written source code, it can be extremely frustrating.

One such situation is the seemingly unaccounted for whitespace below an image. This space appears to be 2 or 3 pixels in length and despite your understanding of the CSS box model, you cannot account for it. All your margins, borders and paddings indicate that this space should not be there.

Well, it turns out this space is quite expected. The reason for the space below the image is that an image is considered to be an inline element by default. Inline elements are displayed equivalent to vertical-align: baseline. The baseline positioning is not the very bottom of the container in which the img appears but rather just above it. The extra space is needed for text with descending features, such as 'y' or 'g'. The size of the space will depend on the font and font size currently in use.

There are a number of ways to remove the extra space. One way is to tell the image to display as a block level element. This can be accomplished with a simple:

img {
    display: block;
}

One caveat with using display:block is that if the image was aligned right, i.e. using text-align:right, displaying the img as a block can result in the image no longer aligning right. If that happens, you can try the other method which is to vertically align the image with 'bottom' instead of 'baseline':

img {
    vertical-align: bottom;
}

If for some reason neither of these solutions work, you can set the height of the containing block to the exact height you want, which means the space will be lost underneath the layer of the proceeding block.