html - 图片底部和边框之间的空间从何而来

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
}

演示

添加vertical-align

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

演示 2