title: How to fully fill child div in div with borders in Chrome?
body: <p>I have a problem. I need to fill image in div with borders, but in Chrome 96.0 i see some inside margins from top and left, and don't know how to delete them.</p>
  <p>This is my code:</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>.wrapper {
    width: 36px;
    height: 36px;
    border: solid 2px red;
    padding: 0;
  }
  
  .img {
    width: 100%;
    height: 100%;
    background: green;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="img"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I see:</p>
  <p><a href="https://i.stack.imgur.com/6WGg9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6WGg9.png" alt="enter image description here" /></a></p>
  <p>What my friend sees in Safari:</p>
  <p><a href="https://i.stack.imgur.com/smsmQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/smsmQ.png" alt="enter image description here" /></a></p>