如何删除无意中出现的图像填充？答案

【问题标题】：How to remove image padding that is showing up unintentionally?如何删除无意中出现的图像填充？
【发布时间】：2011-06-13 04:46:58
【问题描述】：

我在一个容器中有三张图像应该无缝堆叠，但它们之间存在一些填充。

您可以在这里查看页面：http://www.arbitersoflight.net/media/

左侧容器中的三个大按钮是有问题的。

这是容器的代码：

CSS

#mainBoxFull {
    background-image: url(/img/cont/mainfull.jpg);
    float: left;
    height: 560px; 
    width: 560px; 
    margin: 0px; 
    padding: 20px;
}

HTML

<div id="mainBoxFull">
    <img src="/img/btns/media/bgal.jpg" alt="screenshot" width="560" height="180" border="0" />
    <img src="/img/btns/media/bvid.jpg" alt="videos" width="560" height="200" border="0" />
    <img src="/img/btns/media/bsoon.jpg" alt="coming soon" width="560" height="180" border="0" />
</div>

【问题讨论】：

标签： html css web

【解决方案1】：

问题是，图像是内联块。也就是说，它们之间的空格被计算在内。这些空间作为填充出现。使用

#mainBoxFull img { display: block; }

问题应该会消失。或者，您可以删除源 HTML 中 div 和 img 元素之间的空白（all 空白）。

【讨论】：

只要你不需要把你的图片放在一起并让它们换到下一行就可以了。
为什么？父级的浮动和宽度应该足以让图像换行。如果您有不同的要求（例如类似砖石的布局），这不是您应该使用的解决方案。那就试试 Flexbox 之类的吧。

【解决方案2】：

解决同样问题的另一个选择是

#mainBoxFull{ font-size:0; }

它会忽略中间的所有空格。 + 你可以在任何你有文本的地方设置字体大小。

【讨论】：

我喜欢这个解决方案 - 它很干净并且可以解决问题的原因（即行内块元素会考虑行间距）。