我的内嵌图像下方的额外间距

Question

Background

I am creating a video gallery using the ShadowBox jQuery plugin. To do this, I am creating rows of inline images using display:inline-block . The user will be able to upload a video as well as thumbnail images to accompany the video. The thumbnail's max size is 240x160 pixels.

What I want to do is have a black border around each gallery thumbnail "slot" with the user's uploaded thumbnail residing inside of that "slot", so if the user uploads a 240x160 thumbnail, the thumbnail will fill up the "slot" completely, and if they upload a smaller image, the thumbnail will still be in the "slot" with some extra spacing around it.

Here's an example of where I am right now: http://jsfiddle.net/shaunp/HvZ5p/

The problem is that there is extra spacing below my thumbnails and I'm not sure why. If you inspect the code you will see that there is an extra 5 pixels lurking below the image and I'm not sure where it's coming from. The grey part below the image should be directly BEHIND the image so that in the case the user uploads a smaller thumbnail, there will be grey-background space around it, but for some reason it is too tall. Any suggestions?

HTML

<div class="inline">
    <div class="bg-thumb">
        <div class="cell-thumb">
            <a href="#" rev="#nvcCaption#" class="shadow">
                <img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
            </a>
        </div>
    </div>
    <div class="vcCaption">Caption</div>
</div>
<div class="inline">
    <div class="bg-thumb">
        <div class="cell-thumb">
            <a href="#" rev="#nvcCaption#" class="shadow">
                <img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
            </a>
        </div>
    </div>
    <div class="vcCaption">Caption</div>
</div>

CSS

body {
    overflow:hidden;
    margin:0 50px 0 50px;
}
.vcCaption {
    text-align:center;
    font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    color:#000;
    margin-bottom:5px;
}
.inline {
    display:inline-block;   
}
.bg-thumb {
    width:250px;
    height:170px;   
}
.bg-thumb {
    text-align:center;
    display:table;
    margin-bottom:5px;
}
.cell-thumb {
    display:table-cell;
    vertical-align:middle;
    border:5px solid #000;
    background-color:#7f7f7f;
}
.thumbImg {
    max-width:240px;
    max-height:160px;
}

Answer 1

Add vertical-align:top to your thumbnails:

.thumbImg {
    max-width:240px;
    max-height:160px;
    vertical-align:top;
}

jsFiddle example

The default value of vertical-align is baseline , but for your needs you'll want the images to align to the top.

Another option would be to set the font size to zero on the containing div like:

.cell-thumb {
    display:table-cell;
    vertical-align:middle;
    border:5px solid #000;
    background-color:#7f7f7f;
    font-size:0;
}

jsFiddle example

Answer 2

Adding vertical-align: middle; to your image will solve that.

.thumbImg {
    vertical-align: middle;
    max-width:240px;
    max-height:160px;
}

Answer 3

the anchor tag is by default an inline element which gives it extra spacing, set it to a block element and give it some width and height!

.cell-thumb a {
    display: block;
    width: 240px;
    height: 160px;
}

Answer 4

Images will by default display as inline-block ( http://dev.w3.org/html5/markup/img.html#img-display ) meaning that they will sits on an inline level block - or text line if you prefer.

Either set the font-size and/or line-height to 0 or in this case simply set the image to display at block level ( display: block; ).