为什么这张图片上有合适的边距？

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

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

在此片段中，您可以看到＆＃34; blue＆＃34;矩形＆＃34;有＆＃34; 100像素margin-right。但它并没有。蓝色矩形是你的形象。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在@Amit singh的评论基础上，您可以使用！important覆盖特殊规则，如下所示：

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

docs 和when to use it