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

Question

下面我列出了一个说明我的问题的图片。总之，我的网站上每个图像下面都有一个大约2个像素的空白。我不确定是什么导致了这一点，但绝对不是图像本身。我认为它是我的CSS中的box-sizing: border-box片段，因为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），因为您希望文本为inline，并带有img元素。