为什么这张图片有右边距？

Question

我的页面上有两个 <button> 元素，它们内部都有一个 <img>。问题是这两个图像都有右边距。即使我没有在任何地方添加它。我仔细检查了代码两次，并且还确保手动从图像中排除右边距：

button img {
  margin-right: 0px;
}

这是打开开发者工具的截图(Chrome)

当我将鼠标悬停在边距框上时，您可以看到边距，但您还可以看到图像的 margin-right 是 0px。

这也发生在右边的图像上。我正在使用 Bootstrap，如果有任何不同的话。

带有按钮和图像的代码：

<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>

有什么解决办法吗？谢谢。

Answer 1

基于@Amit singh 的评论，您可以使用 !important 覆盖特定规则，如下所示：

button img{
    margin-right: 0px !important;
}

docs 和 when to use it

Answer 2

问题是图像有 display:block 但比其父图像窄。您可以将图片的宽度设置为 100% 或将边距的图片设置为 0 auto 以使其居中。

在此代码段中，您可以看到 "blue" 矩形 "have" 100 像素 margin-right。但事实并非如此。蓝色矩形是您的图像。

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

.inner {
 background:blue;
 width:200px;
 height:100%;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

为什么这张图片有右边距？

Why is there a right margin on this image?

html

css

image

margin

twitter-bootstrap