html - 将 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;
}