继承我的问题+代码: http://jsbin.com/oyusa3/edit
如果你能看到图像之间和它下面有空格,我不想要。我无法找到我指定的地方应该这样做?
我该如何解决这个问题?即使我指定了宽度,框也只是获得了大的宽度(见边框)
答案 0 :(得分:2)
<img>
是一个内联元素,就像文本一样,因此在有空格时它之间总是有空格。尝试去除图像之间的空白区域,它们将缩小间隙。
见这里:
http://jsbin.com/oyusa3/2/edit
与大多数CSS一样,有很多方法可以解决这个问题。查看说明如何使用float
或display: block
(使其不内联)或删除letter-spacing
的其他答案。
答案 1 :(得分:1)
这是因为换行符在内联元素之间呈现为空格。删除源代码中的换行符,或减少font-size
和letter-spacing
。
.items { font-size: 0px; letter-spacing: -2px; }
答案 2 :(得分:1)
这种情况正在发生,因为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
)来向下推,也可以让容器浮动。这取决于我的整体布局。
答案 3 :(得分:0)
尝试将所有图片的边距和边距设置为0
并尝试向左浮动。
答案 4 :(得分:0)
删除图片代码之间的间隙:
<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模块化为内联,这样可以更容易维护。