在div内的图像下额外填充？

Question

出于某种原因，似乎我的div底部有一个额外的填充，里面有一个图像。

这是JSFiddle：http://jsfiddle.net/KSs7V/

关于如何到达/如何修复它的任何想法？

CSS：

.artist-box {
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
}

.artist-pic {
    height: 245px;
    margin: 0;
    /*box-shadow: 0 0 10px black;*/
}
#artist-wrap {
    max-width: 1800px;
    margin-top: 5px;
}

.indArtistBox {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    border: 1px solid #000;
}

Answer 1

只需将vertical-align:top或display:block添加到您的图片规则中：

.artist-pic {
    height: 245px;
    margin: 0;
    vertical-align:top;
    /*box-shadow: 0 0 10px black;*/
}

<强> jsFiddle example

另一种选择是在图像容器div上添加font-size:0：

.indArtistBox {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    border: 1px solid #000;
    font-size:0;
}

<强> jsFiddle example

差距是由于为下行元素保留的空间（例如'j'，'g'，'y'），因为图像是内联元素。