图片底部和边框之间的空间来自哪里

Question

我有一个由div包装的简单图像标签。我只是不明白为什么div的高度比图像大。

HTML

<div class="cc-thumbnail-bar-item">
        <img src="http://www.sir-chesterfield.de/media/catalog/product/0/1/01.01.a_4_4.jpg" class="cc-thumbnail-bar-item-image" />
</div>

CSS

.cc-thumbnail-bar-item {
    border: 1px solid #918e7d;
}

.cc-thumbnail-bar-item-image {
    width: 48px;
}

http://jsfiddle.net/cburgdorf/YW8Ka/

Answer 1

这是因为图像是内嵌呈现的，就像字母一样。你可以看到每个文本底部的空格。

可以通过添加line-height和vertical- align

来修复

添加line-height:0

.cc-thumbnail-bar-item {
     border: 1px solid #918e7d; line-height:0
}

<强> DEMO

添加vertical-align

.cc-thumbnail-bar-item-image {
    width: 48px; vertical-align:top
}

<强> DEMO 2