如何删除无意中显示的图像填充？ [英] How to remove image padding that is showing up unintentionally?

问题描述

我有一个容器应该无缝堆叠的三个图像，但是它们之间有一些填充。

I have three images in a container that should be stacked seamlessly, but there is some padding occurring between them.

你可以在这里看到页面： http://www.arbitersoflight.net/media/

You can see the page here: 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>

推荐答案

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

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

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

and the problem should vanish. Alternatively, you can remove the white space in the source HTML between the div and the img elements (all white space).

这篇关于如何删除无意中显示的图像填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！