自动生成的边距显示内联

Question

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

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

可以看出问题in the demo。

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

谢谢！

Answer 1

使用 Flexbox 的解决方案

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

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>

Answer 2

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

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>

自动生成的边距显示内联

auto-generated margins display inline

css

inline

margin