奇怪的〜2px图像下方的白色区域。可能的 CSS 错误？

Question

下面我附上了一张图片来说明我的问题。总之，我的网站上的每个图像下方都有大约 2 像素的空白存在问题。我不确定是什么原因造成的，但绝对不是图像本身。我相信它是我的 CSS 中的box-sizing: border-box sn-p，因为 2px 将是顶部和底部边框的总和，但是，删除这部分代码并不能解决问题。任何帮助或提示将不胜感激。我曾尝试在手机上查看网页，使用 Firefox 和使用 Chrome，但问题始终存在。

可以在http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1 找到相关网页，但是，我在下面包含了画廊样式表的一部分：

#gallery > div {
    border: 1px solid black;
    margin: 5px;
    width: auto;
}

#gallery > div > * {
    display: inline-block;
}

#gallery > div > img {
    position: relative;
    padding: 0px;
    margin: 0px;
}

#gallery > div > div.description {
    position: relative;
    padding: 3px;
    width: auto;
    vertical-align: top;
}

#galleryNav {
    padding: 0px;
    background-color: #dedede;
    text-align: center;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 1px solid black;
    width: 90%;
    margin: auto;
}

#galleryNav > a {
    text-decoration: none;
    color: black;
    font-family: Arial;
    font-weight: bold;
    display: inline-block;
    padding: 10px 8px 10px 8px;
    margin: 0px;
}

#galleryNav > a:hover {
    background-color: #efefef;
}

#galleryNav > a.active {
    background-color: #afafaf;
}

Answer 1

您可以将img 元素设为block 级别：

#gallery > div > img {
    display:block;
}

或者，将vertical-align 属性值更改为top 之类的值。 （默认为baseline）

#gallery > div > img {
    vertical-align:top;
}

在这种情况下应使用第二个选项 (vertical-align:top)，因为您希望文本为带有 img 元素的 inline。