为什么图像之间存在差距？ [重复]

Question

这个问题在这里已有答案：

• How do I remove the space between inline-block elements? 37回答

这是一个非常简单的例子。它显示所有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;添加到

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

<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

希望这是有帮助的。

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>