圖片不能正常推進父DIV

Question

的高度我想父母DIV是孩子圖像的高度，就像這樣：

<div class="container one"> 
    <img src="http://placehold.it/250x250" /> 
</div> 

的DIV應該是完全250像素高。爲了說明，我創建了一個JSFiddlehere。

現在在FF和Chrome中實際發生的事情是，div只是更高，，也許3到5個像素。

我想避免做不必要的純化妝品標記嵌套像

<div class="container one"> 
    <div class="inner"> 
     <img src="http://placehold.it/250x250" /> 
    </div> 
</div> 

或相似。

我覺得這是非常明顯的，但我無法理解它。

Answer 1

<img>是一個內聯元素，並由於這個事實添加了下面的額外空間。修復它與

img { 
    display: block 
}