html - 为什么我的标题和图片之间有大约 1-2 像素的差距？

Question

我似乎找不到任何余量，所以我对原因是什么以及如何消除它感到困惑。您看不到图像，但可以看到标题和图像之间的灰色边框仍然存在 https://jsfiddle.net/nyftp2b7/11/

.caption-clr {
  background-color: rgba(0, 0, 0, .1);
}
body {
  background-color: lightgreen;
}

<figure class="main-image">
  <a href="img/cannabislegalmap.png">
    <img src="img/cannabislegalmap.png" width="100%" alt="Image of a map of states were recreational cannabis is legal">
  </a>
  <figcaption class="caption-clr">States were recreational cannabis use is legal.
  </figcaption>
</figure>

Answer 1

如果你把 float: left;

在图像上，这样解决了问题；

.main-image img {
float: left;
}

谢谢