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

下面我附上了一张图片来说明我的问题。总之，我的网站上的每幅图片下面都有一个大约2像素的空白。我不确定是什么原因导致了这一点，但这肯定不是图像本身。我相信这是我的CSS中的

框大小：边框框
片段，因为2px是顶部和底部边框的总和，但是，删除这部分代码并不能解决问题。任何帮助或提示都将不胜感激。我曾尝试在手机上使用Firefox和Chrome浏览网页，但问题一直存在


有关网页可在上找到，但我已将画廊样式表的一部分包括在下面：

#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;
}

您可以使
img
元素
block
级别：

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

或者，将
vertical align
属性值更改为类似
top
的值。（默认值为
基线
）

第二个选项（
vertical align:top
）应在本例中使用，因为您希望文本与
img
元素
内联
。
使图像具有
垂直对齐：top修复了该问题。这太奇怪了。。。但是谢谢！
#gallery > div > img {
    vertical-align:top;
}