title: Unexpected space when placing DIV container inside DIV container
body: <p>as you can read from the title I have a problem with placing 1 DIV Container and an Image inside inside a DIV container.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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 &gt; ul {
    list-style-type: none;
  }
  
  #thumb_container &gt; ul &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="thumb_container"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div class="thumb_box"&gt;
          &lt;img src="http://i.imgur.com/MussUUm.jpg"&gt;
          &lt;div class="thumb_info"&gt;
            Test
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/5pd9yrbx/3/" rel="nofollow">jsfiddle</a></p>
  
  <p>It almost works except the blue <code>DIV</code> <code>.thumb_box</code>, which is supposed to hold the image and the other <code>DIV</code> <code>.thumb_info</code> together is slightly too big and I don't know why. I can't figure out why it's expending.</p>