我有两个 <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>
有什么解决办法吗? 谢谢。
最佳答案
问题是图像有 display:block
但它比它的父级窄。您可以将图像的宽度设置为 100% 或将边距图像设置为 0 auto
以使其居中。
在此代码段中,您可以看到“蓝色”矩形“有”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>
关于html - 为什么这张图片有右边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32422870/