如何删除 <picture> 标签之间的间距？

Question

我已经设法通过以下 HTML 代码在移动预览中一个接一个地显示 3 个图像：

<main>

  <div class="showcase">
    <picture>
      <source media="(min-width:1100px)" srcset="images/p1.jpg">
        <source media="(min-width:900px)" srcset="images/p1tab.jpg">

          <img src="images/p1mob.jpg" width=100% alt="Image 1" />
    </picture>

    <p> <a href="">OUR MENU</a> 
    </p>
  </div>

  <div class="showcase">
    <picture>
      <source media="(min-width:1100px)" srcset="images/p2.jpg">
        <source media="(min-width:900px)" srcset="images/p2tab.jpg">

          <img src="images/p2mob.jpg" width=100% alt="Image 2" />
    </picture>
    <p><a href="">RESERVATIONS</a>
    </p>
  </div>
  <div class="showcase">
    <picture>
      <source media="(min-width:1100px)" srcset="images/p3.jpg">
        <source media="(min-width:900px)" srcset="images/p3tab.jpg">

          <img src="images/p3mob.jpg" width=100% alt="Image 3" />
    </picture>
    <p> <a href="">LOCATE US </a>
    </p>
  </div>

  <div class="horizontal">
    <a href=""> ORDER ONLINE </a>
  </div>
</main>

我使用以下 CSS 进行格式化：

main {
  margin: 0px;
}
.showcase {
  position: relative;
  margin: 0px;
  padding: 0px;
}
.showcase picture {
  position: relative;
  margin: 0px;
  padding: 0px;
}
.showcase p a {
  margin: 0px;
  position: absolute;
  top: 45%;
  left: 44%;
  text-align: right;
  text-decoration: none;
  font-family: Fjalla One;
  color: white;
  /* TRBL */
}

我试图在任何地方去掉边距，但不知何故，图片下方的边距永远不会消失。

这里是如何显示的：

我不希望间隙可见。我在哪里错过了代码？间距始终出现在照片下方，而不是三张图片上方。

Answer 1

您需要为所有图像定义display:block 属性。

创建一个新的css 类：

.showcase picture img{
     display:block
}

参考：Space between div and img?

Answer 2

<a> 标签上有 position:absolute，所以<p> 标签仍然位于图像下方。即使它没有高度，它可能仍然有边距，这导致了差距。我认为您可以将定位 css 应用于 p 标签或将它们的边距设置为 0 来修复。 （小修改，因为我意识到你有关于如何显示锚的样式规则）

编辑： 另请注意，它们之间仍然会有一些空间，因为图像默认是内联的并且放置在基线上。您可以通过将<img>s 设置为display:block 或vertical-align:bottom 来解决此问题。