Html css阴影未在图像底部正确应用

我正在使用以下html/css制作主页：

我不明白为什么我应用于图像的阴影开始在图像底线下显示一些像素

相反，在右边是可以的（！？！）为什么

如何解决这个问题

---

非常感谢，亚历山德罗

也许有很多方法可以解决这个问题，但是，有两种方法对我来说很突出：

只需将200px的高度添加到

.homepageimage

。例如：

.homepageimage {
    height: 200px;
}

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

…或添加

页边距底部：-3px至
。主页图像a
。例如：

.homepageimage {
    height: 200px;
}

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

将
行高：0px
添加到
.homepageimage a
（）。
这是因为您正在将阴影应用于图像（和链接）周围的元素，这就是该元素的大小

反过来，该元素之所以如此大，是因为图像是一个内联元素，位于文本块的基线上。图像下方的空间是悬挂字符（如
g
和
j
）基线下方的槽

最稳定的处理方法是将图像转换为块元素：

.homepageimage img { display: block; }

（周围的锚元素已经是块元素了，因为你已经应用了
float:left；
，否则你也需要将其转化为块元素。）
我没有否决投票，但如果其他事情发生变化（如主体字体大小）@cwolves:使用“高度方法”，这是一种不能保证有效的黑客行为似乎工作正常，即使有以前没有的字体更改！：）仍然不是一个很好的解决方案，因为它依赖于200像素高的图像。解决问题总比修补好it@Matt球-不是世界上所有的东西都需要演示谎言，该死的谎言。还有统计数据。啊，废话，我的个人资料上说我否决了你，但我甚至不记得我这样做过（或者说我不知道为什么）。可能是个意外，抱歉，修复得很好！非常感谢你！