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

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/