title: inline-block element nested in another inline-block element has an offsetTop
body: <p>I'm new learning HTML and now I have some code like</p>
  
  <pre><code>&lt;div id="container" style="height:300px;width:500px;font-size:0"&gt;
      &lt;div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;"&gt;
          &lt;div id="wrapper" style="height:10%;"&gt;
              &lt;div style="display: inline-block; background: red; width: 50%; height: 100%;"&gt;&lt;/div&gt;
              &lt;div style="display: inline-block; background: blue; width: 50%; height: 100%;"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(And I posted it on <a href="http://jsfiddle.net/Simon_Chan/Z3WyA/" rel="noreferrer">http://jsfiddle.net/Simon_Chan/Z3WyA/</a> )</p>
  
  <p>You can see the <code>leftBox</code> has a big offsetTop, but if there is no <code>wrapper</code> <em>or</em> <code>wrapper</code>'s height is 100% <em>or</em> there is no <code>rightBox</code> <em>or</em> there is no elements in <code>wrapper</code>, in all these conditions <code>leftBox</code> has no offsetTop.</p>
  
  <p>Why do it? And how to remove it?</p>
  
  <p>Thanks!</p>