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

Question

我已设法通过以下HTML代码在移动设备预览中依次显示3张图片：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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 */
}

＆＃13;

＆＃13;

＆＃13;

我试图夺走各处的保证金，但不过，图片下方的边距不会消失。

以下是如何显示：

我不希望这个差距可见。我在哪里错过了代码？间距始终显示在照片下方，而不是三张图像上方。

Answer 1

<a>标记上的位置为绝对值，因此<p>标记仍然位于图像下方。即使它没有高度，它可能仍然有利润，这导致了差距。我认为你可以将定位css应用于p标签或将其边距设置为0来修复。 （次要编辑，因为我意识到你有关于如何显示锚点的样式规则）

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

Answer 2

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

创建一个新的css类：

.showcase picture img{
     display:block
}

参考：Space between div and img?