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

【问题标题】：Why is there a right margin on this image?为什么这张图片有右边距？
【发布时间】：2015-12-02 01:50:45
【问题描述】：

我的页面上有两个<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>

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

【问题讨论】：

用户 !important 覆盖边距，如 button img { margin-right : 0px !important;}

标签： html css image twitter-bootstrap margin

【解决方案1】：

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

在这个 sn-p 中，您可以看到“蓝色”矩形“有”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>

【讨论】：

@aCodingN00b 很高兴！

【解决方案2】：

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

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

docs 和when to use it

【讨论】：

我加了，但是margin还在？？
我需要代码进行故障排除，使用 jsfiddle.net 并复制重要的块。
这里，jsfiddle.net/e0hxy3Lj。但是您将看不到图片，也看不到 Bootstrap 组件。