title: White Gap Between Border and Inner Object CSS
body: <p>When I have a parent element with a border, and an element on the inside, there is always a little white gap on all sides. This is despite me setting the inner padding and outer margin both to 0.
  Example:</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:200px;
      border:2px solid black;
      overflow:hidden;
      border-radius:999px;
      padding:0;
  }
  #inner{
      width:100%;
      height:100%;
      background-color:red;
      margin:0;
  }</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>