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

Question

下面，我提供了一张说明我的问题的图像。总而言之，我的网站上每张图片下方都有大约2像素的空白，这是一个问题。我不确定是什么原因造成的，但绝对不是图像本身。我相信这是box-sizing: border-box我CSS中的代码段，因为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元素一起出现。