将DIV容器放入DIV容器时出现意外空间

Question

正如您可以从标题中读到的那样，我将1 DIV容器和图像放入DIV容器内部时遇到问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsfiddle

它除了蓝色DIV .thumb_box之外几乎有效，它应该保留图像而另一个DIV .thumb_info在一起有点太大了我不会＃39不知道为什么。我无法弄清楚它为什么要花钱。

Answer 1

我想：

img {
    display: block;
}