在div内的图片下添加额外填充？

Question

For some reason, it seems like there is extra padding on the bottom of my div that holds an image inside it.

Here is the JSFiddle: http://jsfiddle.net/KSs7V/

Any idea on how that got there/how to fix it?

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

Just add vertical-align:top or display:block to your image rules:

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

jsFiddle example

An alternate option is to add font-size:0 on the image container div:

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

jsFiddle example

The gap is due to the space reserved for descender elements (eg 'j', 'g', 'y') as images are inline elements.