Search code examples
htmlcssimagetwitter-bootstrapmargin

Why is there a right margin on this image?

I have two <button> elements on my page, that both have one <img> 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: 

button img {
  margin-right: 0px;
}

Here is the screenshot with developer tools open (Chrome)

enter image description here

You can see the margin when I hover over the margin box, but you can also see that margin-right for the image is 0px.

This also happens to the image on the right. I'm using Bootstrap, if that makes any difference.

Code with the buttons and images: 

<section class="container-fluid" id="upload-buttons">   
  <button><img src="camera128.png" class="img-responsive" alt="Camera Clipart">Upload Image</button>
  <button><img src="video128.png" class="img-responsive" alt="Video Recorder Clipart">Upload Video</button>
</section>

Any solutions? Thanks.

Solution

  • The problem is that the image has display:block but it is narrower than its parent. You can set the image's width 100% or set the margin's image as 0 auto to center it.

    In this snippet you can see the "blue" rectangle "have" 100 pixels margin-right. But it doesn't. The blue rectangle is your image.

    .wrapper {
 background:red;
 width:300px; 
 height:300px;
}

.inner {
 background:blue;
 width:200px;
 height:100%;
}
    <div class="wrapper">
  <div class="inner"></div>
</div>