为什么我的图像没有粘在一起？

Question

我有这个简单的HTML / CSS

<div class="image-group">
  <img src="http://placehold.it/80x80" />
  <img src="http://placehold.it/120x120" />
  <img src="http://placehold.it/80x80" />
</div>

.image-group img {
  margin: 0;
  padding: 0;
}

JSFiddle

为什么图像没有粘在一起？我使用Chrome的Inspector检查元素，它在图像之间没有显示任何内容，但它们是间隔开的。

我可以通过应用负边距让他们团结在一起，但据我说，他们应该坚持在一起。

Answer 1

你的html代码中有空格。请尝试以下

<div class="image-group">
    <img src="http://placehold.it/80x80" /><img src="http://placehold.it/120x120" /><img src="http://placehold.it/80x80" />
</div>

Answer 2

查看此博客文章，了解如何处理具有连续内联块元素（如图像）的空格。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/