title: Google Chrome render engine - Unexpected margin, which is removed after hover on image
body: <p>I found an unexpected problem. </p>
  
  <p>I adds the image inside the DOM. The image has class which contains a
  <code>margin-left: 5px;</code> attribute. But after rendering in Google Chrome, the <code>margin</code> is bigger than it should be, but after I <code>:hover</code> on the image, the <code>margin</code> is gone. 
  Could you explain to me, why it does this? On other browsers it works correctly.</p>
  
  <hr>
  
  <h2><strong>Images for explanation</strong></h2>
  
  <p>Before hover on image:</p>
  
  <p><a href="https://i.stack.imgur.com/TJcgo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TJcgo.jpg" alt="Image before hover on image"></a> </p>
  
  <p>After hover on image (the first one):
  Here, the <code>margin</code> is removed forever. Doesn't extend after hover-off. <sub>Notice the small change between the <em>pig</em> and the <em>spider</em> avatar.</sub><br>
  <a href="https://i.stack.imgur.com/8kaEO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8kaEO.jpg" alt="enter image description here"></a></p>
  
  <p>Actually, it's annoying:</p>
  
  <pre><code>   &lt;img src="&lt;link&gt;" class="avatar"&gt;
     &lt;img src="&lt;link&gt;" class="avatar"&gt;
     &lt;img src="&lt;link&gt;" class="avatar"&gt;
     &lt;img src="&lt;link&gt;" class="avatar"&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.avatar{
      margin-right: 5px;
  }
  </code></pre>
  
  <p><a href="http://zio.ooo/status" rel="nofollow noreferrer">Website with problem on Google Chrome (Sometimes there is not players, so you won't see any avatars, sorry for that.</a></p>