Question

好吧所以这个小而又大规模的烦恼就是，我有一个网站正在努力，特别是一个小组表现得很奇怪。

我有一个通用的盒子div，它可以容纳2个图像，一个在另一个上面，我希望它们之间绝对没有间距。

问题在于，无论我做什么，在开发模式下它都表现正常，但是当我发布时，我会看到图像之间的空间。

通常情况下，我不会设置宽度/高度等取决于我正在做什么，但是对于这个......这是我在所有事情上宣布高度的主要痛苦，以确保我不会错过这里或那里的几个数字，仍然什么都没有。

这是一个正在发生的事情的例子。（在我的服务器上） http://somdowprod.net/4testing/erase

如果你看那里，无论是浏览器（ff / ie / chrome），顶部的pic和底部的tst pic之间的空间大约为5px ......事情表现得像桌子......

继承了内联css im测试/隔离的代码：

   <style type="text/css">

body{ margin:0px; padding:0px;}

.nospacedammit{ margin:0px; padding:0px;}
#portS_mainW{ width:400px; height:500px; padding:0px; margin:0px;}
#portS_mainW img{ margin:0px; padding:0px; }
</style>

并且继承了这个小组的基本html：

    <div id="portS_mainW">
<span class="nospacedammit"><img src="images/xrodemo.jpg" alt="xro" width="400" height="300"/></span>
<span class="nospacedammit"><img src="images/erase.png" alt="xro" width="400" height="200"/></span>
</div>

我已经添加了高度，以便100％确定#s，我已经在每个元素上添加了边距/填充，以便再次确保没有间距。

我还将每个图像包裹在一个span标签中，然后将所有内容添加到零样式中......尝试以各种方式强制零间距。但仍然没有。

我很高兴欣赏任何想法，见解。

提前谢谢。

Answer 1

尝试将float:left添加到您的图片中。刚刚在Firefox 3.6中对此进行了测试，它对我有用： - ）

我不是百分之百确定为什么会发生这种情况，但我的猜测是因为你的元素都没有应用任何定位，而是由浏览器决定。

Answer 2

试试这个：

<img class="nospacedammit" src="images/xrodemo.jpg" alt="xro" width="400" height="300"/>
<img class="nospacedammit" src="images/erase.png" alt="xro" width="400" height="200"/>

并添加display：block;到.nospacedammit

Answer 3

您可以在line-height: 0;课程上设置nospacedammit。这就是在2幅图像之间插入空间的原因。

修改：您需要将显示设置为display: block

CSS间距问题。需要新鲜的眼睛。（应该很容易）

3 个答案: