title: Div's height gets extended as soon as an image is added
body: <p>Spent 2 days fighting with this: <a href="http://jsfiddle.net/DQFja/537/" rel="nofollow">http://jsfiddle.net/DQFja/537/</a>
  Basically have a parent div called "table" and 2 cells in it. One cell has sub-div, another cell has an image. Image is not displayed on the top left side of the div as I would've expected. This can be fixed by removing "height" attribute from the sub-div but I need it (the div is used for background and cell1 is also used for background).</p>
  
  <pre><code>&lt;div id="table"&gt;
   &lt;div id="cell1"&gt;
    &lt;div id="sub-cell1"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="cell2"&gt;
    &lt;img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="20"/&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  #table
  {
   display:table;
   height:103px;
  }
  
  #cell1, #cell2
  {
   display:table-cell;
  }
  
  #cell1
  {
   width:50%;
   height:103px;
   background-color:green;
  }
  
  #sub-cell1
  {
   width:100%;
   height:103px;
   display:inline-block;
  }
  
  #cell2
  {
   width:1000px;
   height:103px;
   background-color:red;
  }
  </code></pre>
  
  <p>Could anybody explain me why the image is not positioned on the top left side in the second div here? It works as expected if image is removed or if the sub-div is removed or if "height" attribute of the sub-div is removed.</p>