html - 图像底部未正确应用 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;
}