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

我有一个应该无缝堆叠的容器中的三个图像，但它们之间存在一些填充。如何删除无意中出现的图像填充？

您可以在这里看到的页面：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>

来源

2011-01-21 Ferret

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

#mainBoxFull img { display: block; }

并且问题应该消失。或者，您可以删除div和img元素之间的源HTML中的空白区域（全部为空白区域）。

来源

2011-01-21 14:40:31 Boldewyn

+1，float：left;在图像上也会起作用。 – plebksig 2011-01-21 14:43:20

工作很好，谢谢！ – Ferret 2011-01-21 14:53:23

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

#mainBoxFull{ font-size:0; }

它会忽略之间的所有空格。 +你可以选择字体大小，只要你有文字。

来源

2013-11-22 10:19:03 user3016780

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

回答

相关问题