html - 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”)保留的空间，因为图像是内联元素。