为什么图像之间存在差距？

Question

这是一个非常简单的例子。它显示所有4个图像之间的间隙。如果他们在同一个div中并不重要。

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

div {
  margin: 0;
  padding: 0;
}
img {
  margin: 0;
  padding: 0;
}

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

Codepen

这些差距来自何处以及如何摆脱它们？

我已经在Chrome，Opera，Firefox和Safari中进行了测试。

Answer 1

原因是内联元素（<img>）。你可以做多件事。一种方法是将图像容器上的font-size设置为0。

div.img {
  clear:both;
  font-size:0;
}
div.img img {
  display:inline;
  float:left;
}

<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>
<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>

使用flexbox的另一种解决方案（更推荐）：

div.img {
  display:flex;
  flex-direction:row;
  align-items:start;
}

<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>
<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>

还有一个CSS网格解决方案：

div.img {
  display:grid;
  grid-template-columns:auto auto;
}

<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>
<div class="img">
  <img src="https://lorempixel.com/400/200">
  <img src="https://lorempixel.com/400/200">
</div>

Answer 2

只需将display: flex用于父div，如下所示

div {
  display: flex;
}

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

Answer 3

更新

只需将float: left添加到<img>，问题就解决了

img是一个块元素，这就是为什么它们之间的差距，如果float使用img那么它将解决您的问题。

要根据图像中断图像，只需将clear: both;添加到

即可

＆＃13;

＆＃13;

div {
  margin: 0;
  padding: 0;
  clear: both;
}
img {
  margin: 0;
  padding: 0;
  float:left;
}

＆＃13;

<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>
<div>
  <img src="http://lorempixel.com/400/200">
  <img src="http://lorempixel.com/400/200">
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen

希望这有用。

Answer 4

使用“style=float:left”，style="line-height:0px;"将解决问题。尝试下面它解决底部空间的问题

<div style="line-height:0px;">
  <img src="http://lorempixel.com/400/200" style="float:left;">
  <img src="http://lorempixel.com/400/200">
</div>
<div >
  <img src="http://lorempixel.com/400/200" style="float:left;">
  <img src="http://lorempixel.com/400/200">
</div>