CSS тени не применяются правильно в нижней части изображения

Question

Я работаю на домашней странице с этим html / css: http://jsfiddle.net/2qWYf/5/

Я не могу понять, почему тени, которые я применил к изображениям, начинают показывать несколько пикселей под нижней строкой изображения.

С правой стороны все в порядке (!?!) Почему?

Как это исправить?

Большое спасибо, Алессандро

Answer 1

Это потому, что вы применяете тень к элементу, который окружает изображение (и ссылку), и это размер этого элемента.

Причина, в свою очередь, почему этот элемент имеет такой размер, заключается в том, что изображение является встроенным элементом, который помещается в базовую строку текстового блока. Пространство под изображением - это желоб под базовой линией для висящих символов, таких как g и j.

Самый стабильный способ справиться с этим - превратить изображения в блочные элементы:

.homepageimage img { display: block; }

(окружающий элемент привязки уже является блочным элементом, так как вы применили к нему float: left;, в противном случае вам также потребуется преобразовать его в элемент блока.)

Answer 2

Добавить line-height: 0px к .homepageimage a ( демо ).

Answer 3

Вероятно, есть много способов исправить это, однако два выделяются для меня:

Просто добавьте высоту 200px к .homepageimage. Пример:

.homepageimage {
    height: 200px;
}

... или добавьте margin-bottom: -3px; к .homepageimage a. Пример:

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