CODEWITHSUNDEEP
htmlimagecssshadows
Alessandro
Alessandro

Reputation: 341

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 pixels under the image bottom line.

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

How to fix this?

Many thanks, Alessandro

Upvotes: 2

Views: 82

Answers (3)

Guffa
Guffa

Reputation: 700552

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.)

Upvotes: 3

user578895
user578895

Reputation:

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

Upvotes: 1

Shaz
Shaz

Reputation: 15877

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

Upvotes: 0

Related Questions