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

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; }

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