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
}

DEMO

添加vertical-align

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

DEMO 2