css shadows not applied correctly in bottom of images

I'm working on an homepage with this html/css: http://jsfiddle.net/2qWYf/5/

I can't figure out why the shadows I applied to the images are start to showing some pi开发者_如何学Cxels under the image bottom line.

In the right side instead it's ok (!?!) Why?

How to fix this?

Many thanks, Alessandro

That is because you are applying the shadow to the element that surrounds the image (and the link), and that is the size of that element.

The reason, in turn, why that element is that size, is because the image is an inline element which is placed on the base line of a text block. The space below the image is the gutter below the baseline for hanging characters like g and j.

The most stable way to handle this is to turn the images into block elements:

.homepageimage img { display: block; }

(The surrounding anchor element is already a block element as you have applied float: left; to it, otherwise you would need to turn that into a block element too.)

Add line-height: 0px to .homepageimage a (demo).

There are probably many ways to fix this, however, two stand out for me:

Simply add a height of 200px to .homepageimage. Example:

.homepageimage {
    height: 200px;
}

...or add margin-bottom: -3px; to .homepageimage a. Example:

.homepageimage a {
    text-decoration: none;
    float: left;
    margin-bottom: -3px;
}