图像底部未正确应用 css 阴影答案

【问题标题】：css shadows not applied correctly in bottom of images图像底部未正确应用 css 阴影
【发布时间】：2011-10-05 18:48:02
【问题描述】：

我正在使用此 html/css 制作主页：http://jsfiddle.net/2qWYf/5/

我无法弄清楚为什么我应用于图像的阴影开始在图像底线下方显示一些像素。

在右侧反而没问题（！？！）为什么？

如何解决这个问题？

非常感谢，亚历山德罗

【问题讨论】：

【解决方案1】：

这是因为您将阴影应用到图像（和链接）周围的元素，这就是该元素的大小。

反过来，为什么该元素是该大小的原因是因为图像是放置在文本块基线上的内联元素。图片下方的空间是基线下方的间距，用于悬挂g 和j 等字符。

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

.homepageimage img { display: block; }

（周围的锚元素已经是块元素，因为您已对其应用float: left;，否则您也需要将其转换为块元素。）

【讨论】：

【解决方案2】：

将line-height: 0px 添加到.homepageimage a (demo)。

【讨论】：

【解决方案3】：

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

只需将 200px 的高度添加到 .homepageimage。示例：

.homepageimage {
    height: 200px;
}

...或将margin-bottom: -3px; 添加到.homepageimage a。示例：

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

【讨论】：