html - 我的内联图像下方的额外间距

Question

背景

我正在使用 ShadowBox jQuery 插件创建一个视频库。为此，我使用 display:inline-block 创建了多行内联图像。用户将能够上传视频以及视频附带的缩略图。缩略图的最大尺寸为 240x160 像素。

我想要做的是在每个图库缩略图“插槽”周围有一个黑色边框，用户上传的缩略图位于该“插槽”内，因此如果用户上传 240x160 缩略图，缩略图将填满“插槽” ”，如果他们上传较小的图片，缩略图仍会位于“插槽”中，周围会有一些额外的间距。

这是我现在所处位置的示例:http://jsfiddle.net/shaunp/HvZ5p/

问题是我的缩略图下方有额外的间距，我不确定为什么。如果您检查代码，您会发现图像下方潜伏着额外的 5 个像素，我不确定它来自哪里。图片下方的灰色部分应该直接在图片后面，这样在用户上传较小的缩略图的情况下，它周围会有灰色背景空间，但由于某种原因它太高了。有什么建议吗？

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

将 vertical-align:top 添加到您的缩略图:

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

jsFiddle example

默认值vertical-align是 baseline，但根据您的需要，您会希望图像与顶部对齐。

另一种选择是在包含的 div 上将字体大小设置为零，例如:

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

jsFiddle example