图片底部和边框之间的距离是从哪里来的

我有这个简单的图片标签，它是由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/

来源

2013-03-19 Christoph

的可能重复[为什么一个div内的图像具有图像下方的额外空间？（http://stackoverflow.com/questions/5804256/why-an-image-inside-a- div-has-an-extra-space-below-the-image） – Quentin 2013-03-19 11:45:22

啊，这个解释是有道理的。疯狂我以前没有遇到过。 – Christoph 2013-03-19 11:48:41

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

它可以通过添加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

来源

2013-03-19 11:45:17 Sowmya

这并不能解释为什么*，这就是问题所在。 – Quentin 2013-03-19 11:45:55

baff！你是男人！ – Christoph 2013-03-19 11:46:02

图片底部和边框之间的距离是从哪里来的

回答

相关问题