Question

继承我的问题+代码： http://jsbin.com/oyusa3/edit

如果你能看到图像之间和它下面有空格，我不想要。我无法找到我指定的地方应该这样做？

我该如何解决这个问题？即使我指定了宽度，框也只是获得了大的宽度（见边框）

Answer 1

<img>是一个内联元素，就像文本一样，因此在有空格时它之间总是有空格。尝试去除图像之间的空白区域，它们将缩小间隙。

见这里：

http://jsbin.com/oyusa3/2/edit

与大多数CSS一样，有很多方法可以解决这个问题。查看说明如何使用float或display: block（使其不内联）或删除letter-spacing的其他答案。

Answer 2

这是因为换行符在内联元素之间呈现为空格。删除源代码中的换行符，或减少font-size和letter-spacing。

.items { font-size: 0px; letter-spacing: -2px; }

Answer 3

这种情况正在发生，因为img是一个内联元素 - 也就是说，它实际上变成了文本流的一部分。由于标记中它们之间有一些空格，因此输出中有一个空格字符。

要删除它，您可以删除标记中的空格，或者将它们更改为沿这些行使用样式：

img {
    display: block;  /* no longer an inline element */
    float: left;     /* element will contract width to as small as it needs to be */
                     /* and push it left */
}

这可能会导致您在容器中不再包含某些问题。您可以使用另一个元素clear: left（或both）来向下推，也可以让容器浮动。这取决于我的整体布局。

Answer 4

尝试将所有图片的边距和边距设置为0并尝试向左浮动。

Answer 5

删除图片代码之间的间隙：

<img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=103" title="Meg Meg"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=3" title="Ani Paltian"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=104" title="Rafo Oganesian"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=86" title="Megan Fox"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=92" title="Peter Pede">

另外，作为对代码的评论，最好将样式表中的CSS模块化为内联，这样可以更容易维护。

HTML / CSS：彼此之间有图像

5 个答案: