Неожиданное пространство при размещении контейнера DIV внутри контейнера DIV

Question

Как вы можете прочитать из заголовка У меня возникла проблема с размещением 1 контейнера DIV и изображения внутри контейнера DIV.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
.placeholder { 
 
    height: 200px width: 100px; 
 
    background-color: blue; 
 
} 
 

 
#thumb_container { 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: auto; 
 
    background-color: #333; 
 
} 
 

 
#thumb_container > ul { 
 
    list-style-type: none; 
 
} 
 

 
#thumb_container > ul > li { 
 
    display: inline-block; 
 
    background-color: #777; 
 
} 
 

 
.thumb_box { 
 
    width: 100%; 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 

 
.thumb_info { 
 
    width: 100%; 
 
    background-color: yellow; 
 
    opacity: .5; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id="thumb_container"> 
 
    <ul> 
 
    <li> 
 
     <div class="thumb_box"> 
 
     <img src="http://i.imgur.com/MussUUm.jpg"> 
 
     <div class="thumb_info"> 
 
      Test 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <ul> 
 
</div>

jsfiddle

Это почти работает, кроме синего DIV.thumb_box, который должен удерживать изображение, а другой DIV.thumb_info вместе немного слишком большой, и я не знаю, Зачем. Я не могу понять, почему он расходует.

Answer 1

Я думаю:

img { 
    display: block; 
}