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

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浏览器的检查工具发现图片之间没有任何元素，但它们还是被间隔开了。

通过应用负边距，我可以让它们粘在一起，但根据我的理解，它们本来就应该粘在一起。

- Ayush

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>

- SangYeob Bono Yu

Answer 2

请查看这篇关于处理连续的inline-block元素（如图片）之间空格的博客文章。

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

- RyanFishman

---

谢谢你提供的链接。我最终注释掉了空格。 - Ayush