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

Question

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

您可以在此处查看页面：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>

Answer 1

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

#mainBoxFull img { display: block; }

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

Answer 2

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

#mainBoxFull{ font-size:0; }

它会忽略它们之间的所有空白区域。 +你可以在有文字的地方看到字体大小。