在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例子

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

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

jsFiddle例子

间隙是由于为下降元素保留的空间(例如'j','g','y'),因为图像是内联元素.