我在一个容器中有三张图像,它们应该无缝堆叠,但它们之间有一些填充。
您可以在此处查看页面: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>
最佳答案
问题是,图像是行内 block 。也就是说,计算它们之间的空格。这些空格对您来说是填充。使用
#mainBoxFull img { display: block; }
问题应该消失了。或者,您可以删除源 HTML 中 div 和 img 元素之间的空白(所有 空白)。
关于html - 如何删除无意中出现的图像填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4760002/