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

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

问题是，图像是行内 block 。也就是说，计算它们之间的空格。这些空格对您来说是填充。使用

#mainBoxFull img { display: block; }

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