title: Why are an element's scrollHeight and clientHeight not the same for some fonts?
body: <p>For some fonts when the <code>line-height</code> of the element is smaller than a threshold the <code>scrollHeight</code> is bigger than the <code>clientHeight</code>.</p>
  
  <p>So there is something in the font properties that causes this but what is this and <strong>how can it be avoided preferably using CSS or even a font editor for custom fonts?</strong></p>
  
  <p>For example, in this snippet the <code>scrollHeight</code> for <code>Tahoma</code> is more than the <code>clientHeight</code> although <code>sans-serif</code> seems OK when <code>line-height</code> is 1. <strong>This difference increases when the page is zoomed in Chrome (ctrl+)</strong> and happens even for sans-serif. When the line-height is below 1 or the font-size gets bigger the difference increases.</p>
  
  <p><strong>For some other fonts it goes up to 5px</strong> at line-height 1 and decreases by increasing the line-height up to 2 which leads to incorrect calculation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var a = document.getElementById('a');
  console.log('tahoma - a.clientHeight: ' + a.clientHeight);
  console.log('tahoma - a.scrollHeight: ' + a.scrollHeight);
  
  var b = document.getElementById('b');
  console.log('sans - b.clientHeight: ' + b.clientHeight);
  console.log('sans - b.scrollHeight: ' + b.scrollHeight);
  
  var c = document.getElementById('c');
  console.log('sans - lineHeight:0.5 - c.clientHeight: ' + c.clientHeight);
  console.log('sans - lineHeight:0.5 - c.scrollHeight: ' + c.scrollHeight);
  
  var d = document.getElementById('d');
  console.log('sans - font-size:200px - d.clientHeight: ' + d.clientHeight);
  console.log('sans - font-size:200px - d.scrollHeight: ' + d.scrollHeight);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div[id] {
   overflow:auto;
   max-width:80%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='a' style='font-family:tahoma; line-height:1;'&gt;Hello&lt;/div&gt;
  &lt;div id='b' style='font-family:sans-serif; line-height:1;'&gt;Hello&lt;/div&gt;
  &lt;div id='c' style='font-family:sans-serif; line-height:0.5;'&gt;Hello&lt;/div&gt;
  &lt;div id='d' style='font-family:sans-serif; line-height: 1; font-size:500px;'&gt;Hello&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's clear that this difference is due to an overflow issue but what font metrics are involved here and how can we identify the difference between <code>scrollHeight</code> and <code>clientHeight</code>? </p>
  
  <p>This happens <strong>both in Chrome and Firefox</strong>; I didn't test other browsers.</p>