自动生成的边距显示内联[重复]

Question

我有以下问题：我想在同一行中有三个图像，中间没有边距。问题是当使用 display:inline 或 display:inline-block 时，图像之间会产生垂直和水平空白。

div img{
    width: 33.3333%;
    display: inline-block;
}

你可以看到问题in the demo。

我知道使用 float:left 可以解决问题，但我想避免这种情况，因为除非非常必要，否则我不喜欢使用它。

谢谢！

Answer 1

如果不想使用float:left，可以使用HTML注释块清除图片标签之间的空格。

Working example.

CSS：

div img {
  width: 33.3333%;
  display: inline-block;
}

HTML：

<div>
  <img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg"><!--
  --><img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg"><!--
  --><img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg">
</div>

Answer 2

使用 Flexbox 的解决方案

您可以使用display: flex 将父 div 设置为具有灵活布局。它也删除了空白。

div {
  display: flex;
  align-items: flex-end;
}
div img {
  width: 33.3333%;
  display: inline-block;
}

<div>
  <img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg" />
  <img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg" />
  <img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg" />
</div>

使用margin-right的解决方案

div img {
  display: inline-block;
  margin-right: -0.33em;
  width: 33.3333%;
}

<div>
  <img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg" />
  <img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg" />
  <img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg" />
</div>