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 示例

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

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

jsFiddle 示例

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