Unexpected space when placing DIV container inside DIV container

Question

as you can read from the title I have a problem with placing 1 DIV Container and an Image inside inside a DIV container.

* {
  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

It almost works except the blue DIV .thumb_box, which is supposed to hold the image and the other DIV .thumb_info together is slightly too big and I don't know why. I can't figure out why it's expending.

Answer 1

I guess:

img {
    display: block;
}