title: Why scrollHeight is bigger than offsetHeight, when used inline-block and DOCTYPE html?
body: <p>We migrated our HTML application from DOCTYPE XTHML 1.0 to DOCTYPE HTML.
  And we saw that in some DIV appeared a vertical scroll.</p>
  
  <p>These DIV has layout similar to that:<br>
  <strong>CSS</strong>
  </p>
  
  <pre><code>#scrollContainer,
  #overflowedNode 
  {
      height: 100px;
      width: 200px;
  }
  
  #overflowedNode 
  {
      display: inline-block
  }
  </code></pre>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;div id="scrollContainer"&gt;
      &lt;div id="overflowedNode"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this case, the DIV with id "scrollContainer" has a calculated height:
  </p>
  
  <pre><code>offsetHeight = 100;
  scrollHeight = 105;
  </code></pre>
  
  <p>I think, that a vertical scroll appears, because the difference in height is 5 pixels.
  But if you add at least one letter to content in the DIV with id "overflowedNode", then scrollHeight will be equal to the offsetHeight.      </p>
  
  <h2>Why is there a difference between offsetHeight and scrollHeight to 5px and how to fix it?</h2>
  
  <p><i>Example to reproducing:</i> <a href="https://jsfiddle.net/yaznayka/204qntjh/5/" rel="nofollow">https://jsfiddle.net/yaznayka/204qntjh/5/</a></p>