包含圖像的底部空間

Question

對於這個小提琴，爲什麼在div#imageDiv的底部有一個空格？

JSFiddle

<div> 
<div> 
<div> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />  
</div> 
</div> 
</div> 
<div id="text"><div id="inner">text goes here</div></div>   

html { 
    line-height: 1.5em; 
} 
#text { 
    background-color: grey; 
    margin-top:-7px; 
} 

Answer 1

設置你的圖像img { display: block; }。並且請下次在此處添加您的代碼以防止鏈接腐爛，並讓我們輕鬆地在此處查看您的代碼。

Answer 2

給你的圖像的底部垂直對齊和空間消失。

jsFiddle example

img { 
    vertical-align:bottom; 
} 

Answer 3

你也可以邊距屬性來實現這一

http://jsfiddle.net/meetravi/7Knyx/14/

PS它總是偉大的，以避免負值在CSS，如果你計劃支持比較舊的瀏覽器