當圖像被添加時div高度過度伸展

Question

我遇到嵌套div及其高度的問題。

我想要完成的是一個圖像的父母的身高拉伸適合圖像。正在發生的事情是父母過度緊張，身高比形象大。

可以檢查代碼，在這裏工作： http://jsfiddle.net/83Ke6/

HTML

<div class="select_box"> 
    <div class="selected"> 
     <img src="http://awardwallet.com/images/fbSmallLogo.png" /> 
    </div> 
</div> 

CSS

.select_box { 
    display:inline-block; 
    height:50px; 
    border:1px solid blue; 
} 
.selected { 
    border:1px solid gray; 
} 
img { 
    border:1px solid red; 
} 

所以在這種情況下，.selected應該等於IMG的高度，但它是爲5px heigher; 感謝您的幫助

Answer 1

默認情況下，img是一個內聯元素，因此會在段落中的行中保留一個空格。將display: block;添加到圖像以刪除間距。

小提琴：http://jsfiddle.net/83Ke6/3/

Answer 2

.select_box { 
    display:inline-block; 
    height:auto; 
    border:1px solid blue; 
    line-height:0px; 
} 
.selected { 
    border:1px solid gray; 
    height:auto; 
} 
img { 
    border:1px solid red; 
} 

通過設置自動;高度和0px的線高度，您的div將適應它的內部內容。導致像這樣：http://jsfiddle.net/wz45k/