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

【问题标题】：Unexpected space when placing DIV container inside DIV container将 DIV 容器放入 DIV 容器时出现意外空间
【发布时间】：2015-10-22 10:20:13
【问题描述】：

正如您从标题中看到的那样，我在将 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 稍微太大了，我不知道为什么。我无法弄清楚它为什么会花费。

【问题讨论】：

欢迎来到 Stack Overflow！寻求调试帮助的问题必须在问题本身中包含重现它所需的最短代码。 注意 - 请不要滥用代码块来绕过此要求。。跨度>
...阅读how to ask a good question
感谢编辑，不明白你的意思。
@t.niese 非常感谢！不知道是图片的问题，还以为跟两个元素的位置有关系！我通过在图像标签处设置 display:block 来修复它。不敢相信这是问题所在。谢谢你，很抱歉提出这么奇怪的书面问题。
问题与图像有关（Remove white space below image），但不是完全重复。实际的问题是内联的图片和元素的位置absolute的组合。

标签： html css position containers absolute

【解决方案1】：

我猜：

img {
    display: block;
}

【讨论】：

不客气，考虑接受它作为答案；）