title: How to remove space between div content and border?
body: <p>I have <code>div</code> inside another <code>div</code>. If I have a border in the outer <code>div</code> I got a space in Microsoft Edge browser in some scales (100% or 125%). I think it's a rounding bug, but I don't know how to get rid of it.</p>
  
  <p><strong>html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.outer {
      background-color: black;
      float: left;
      border: 1px solid white;
  }
  
  .inner {
      width: 300px;
      height: 300px;
      background-color: yellow;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/EvgeniiMalikov/4bbx9p5w/" rel="nofollow noreferrer">https://jsfiddle.net/EvgeniiMalikov/4bbx9p5w/</a></p>
  
  <p>As you can see there is black background visible between outer and inner div. If you don't see it try to change scale.</p>
  
  <p><strong>UPDATE:</strong> the gap really appears not between div elements, it's inside inner div close to its border. Discovered it by adding outline to inner div.</p>
  
  <p><strong>example screenshot</strong></p>
  
  <p><a href="https://i.stack.imgur.com/2KbZt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2KbZt.png" alt="example screenshot"></a></p>
  
  <p><strong>example screenshot with border and outline</strong>
  (gap between border and outline)
  <a href="https://i.stack.imgur.com/s9Cyx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s9Cyx.png" alt="example with outline"></a></p>
  
  <pre><code>box-sizing: border-box;
  border: 1px solid lime;
  outline: 1px solid lime;
  </code></pre>