为啥这张图片有右边距？

Posted 2023-03-06

【中文标题】为啥这张图片有右边距？

【英文标题】：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" >Upload Image</button>
  <button><img src="video128.png" class="img-responsive" >Upload Video</button>
</section>

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

【问题讨论】：

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

【参考方案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 组件。