圖片底部和邊框之間的距離是從哪裏來的

我有這個簡單的圖片標籤，它是由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

圖片底部和邊框之間的距離是從哪裏來的

回答

相關問題