title: Image margin not pushing the edge of browser page, after javascript function
body: <p>So I have a javascript function, which randomly scatters images.</p>
  <p>The browser / page window automatically resizes to fit these images (you can't scroll further than the images / the edge of the browser window is the outer edge of the furthest image).</p>
  <p>But why is the margin not pushing that boundary further?</p>
  <p>So the images have a little extra space before the edge of the window. I don't want the image right up against the edge.</p>
  <p>My javascript code:</p>
  <pre><code>//random position of each Card, 
  
  $(document).ready(function(){
  
  $('img').each(function() {
  
  var top = (Math.random() * 200) 
  var left = (Math.random() * 200) 
  
  $(this).css({'top' : top + 'vh'})
  $(this).css({'left' : left + 'vw'})
  
   $(this).css({'margin' : 10 + '%'})
  
  });
  
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/PGYpa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PGYpa.png" alt="IMG margin not pushing the edge of browser window limits" /></a></p>