title: Why is there a right margin on this image?
body: <p>I have two <code>&lt;button&gt;</code> elements on my page, that both have one <code>&lt;img&gt;</code> inside. 
  The problem is that both of these images have a right margin. Even though I didn't add it anywhere. I double checked the code twice, and I also made sure to manually exclude the right margin from the images: </p>
  
  <pre class="lang-css prettyprint-override"><code>button img {
    margin-right: 0px;
  }
  </code></pre>
  
  <p>Here is the screenshot with developer tools open (Chrome)</p>
  
  <p><a href="https://i.stack.imgur.com/T1C41.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T1C41.jpg" alt="enter image description here"></a></p>
  
  <p>You can see the margin when I hover over the margin box, but you can also see that <code>margin-right</code> for the image is <code>0px</code>.</p>
  
  <p>This also happens to the image on the right.
  I'm using Bootstrap, if that makes any difference.</p>
  
  <p>Code with the buttons and images: </p>
  
  <pre><code>&lt;section class="container-fluid" id="upload-buttons"&gt;   
    &lt;button&gt;&lt;img src="camera128.png" class="img-responsive" alt="Camera Clipart"&gt;Upload Image&lt;/button&gt;
    &lt;button&gt;&lt;img src="video128.png" class="img-responsive" alt="Video Recorder Clipart"&gt;Upload Video&lt;/button&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Any solutions?
  Thanks.</p>