title: Why does setting a border give an element 1px extra internal height?
body: <p>When putting a border around a block element, <strong>why does the apparent visual height of the element <em>inside</em> the border increase by 1</strong>? The reported <code>offsetHeight</code> is still equal to the desired height plus the border widths.</p>
  <p>This becomes problematic when trying to make an inner block element the same height as an outer element. Notice the extra 1px of height the outer element has in this example, causing the inner element's background color to not fill the entire container:</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-css lang-css prettyprint-override"><code>#outer { height: 10px; width: 100px; border: 1px solid red; }
  #inner { height: 10px; width: 50%; background-color: black; }
  /* Setting #inner height to 100% has the same problem. */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;&lt;div id="inner"&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>On my device, there's a one-pixel-high gap between the black background and the red border.</p>
  <p><a href="https://i.stack.imgur.com/zkVkN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkVkN.png" alt="repro showing 1px gap above border" /></a></p>
  <p>What causes this, and how can I remove the &quot;extra&quot; bit of height inside the outer element so that my inner element takes up the full visual height of its container?</p>
  <p>Does this have something to do with subpixel rendering?</p>
  <p><strong>Edit</strong>: This question is not about the box model per se. I do understand the box model; the problem here is that the element is being rendered with extra height <em>inside</em> its borders. Even Chrome's dev inspector doesn't show this &quot;extra&quot; height in its box model, but it's apparent on the screen.</p>