Html 如何删除无意中显示的图像填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4760002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove image padding that is showing up unintentionally?
提问by Ferret
I have three images in a container that should be stacked seamlessly, but there is some padding occurring between them.
我在一个容器中有三个图像应该无缝堆叠，但是它们之间存在一些填充。
You can see the page here: http://www.arbitersoflight.net/media/
您可以在此处查看该页面：http: //www.arbitersoflight.net/media/
The three large buttons in the container on the left are the ones in question.
左侧容器中的三个大按钮就是有问题的按钮。
Here's the code for the container:
这是容器的代码：
CSS
CSS
#mainBoxFull {
background-image: url(/img/cont/mainfull.jpg);
float: left;
height: 560px;
width: 560px;
margin: 0px;
padding: 20px;
}
HTML
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>
回答by Boldewyn
The problem is, that images are inline-blocks. That is, spaces between them are counted. These spaces occur as padding to you. Use
问题是，图像是内联块。即，计算它们之间的空间。这些空格作为填充出现。用
#mainBoxFull img { display: block; }
and the problem should vanish. Alternatively, you can remove the white space in the source HTML between the div and the img elements (allwhite space).
并且问题应该消失。或者，您可以删除源 HTML 中 div 和 img 元素之间的空白（所有空白）。
回答by user3016780
Another option to resolve the same problem is
解决相同问题的另一种选择是
#mainBoxFull{ font-size:0; }
it'll ignore all the white spaces in between. + you can se font size where ever you have the text.
它会忽略中间的所有空格。+您可以在任何有文本的地方设置字体大小。
