使用 <figure> 时如何减少图像之间的空间？

Question

使用<figure>时如何调整图片间距？我想减少空间，但由于某种原因，我无法让它让步。

我想要 3 张图片放在一排，但是因为我无法减少图片之间的空间以让它们舒适地放入 div 框中，所以第三张是包装并位于前两张下方

.container3 {
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
}

<div class="container3">
<figure>
  <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
  <figcaption>
    Fall Berry Blitz Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
  <figcaption>
    Spiced Rum Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
  <figcaption>
    Seasonal Donuts
  </figcaption>
</figure>
</div>

Answer 1

图应用了 16px 的边距。您可以调整边距，如果是这样，您想要什么：

.container3 {
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
  border: 1px dashed black;
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
}

<div class="container3">
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
    <figcaption>
      Fall Berry Blitz Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
    <figcaption>
      Spiced Rum Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
    <figcaption>
      Seasonal Donuts
    </figcaption>
  </figure>
</div>

如果要在图像之间平均分配可用空间，可以使用 flexbox 并使用justify-content: space-between：

.container3 {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
  border: 1px dashed black;
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
}

<div class="container3">
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
    <figcaption>
      Fall Berry Blitz Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
    <figcaption>
      Spiced Rum Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
    <figcaption>
      Seasonal Donuts
    </figcaption>
  </figure>
</div>

我根据 OP 的评论添加了另一个 sn-p：

.container {
  background: tomato;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-flow: column nowrap;
  width: 600px;
  height: 300px;
  box-sizing: border-box;
  border: 1px dashed black;
}

.row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.row figure {
  background: #DEDEDE;
  /* or width */
  flex-basis: calc(100% * 1/3);
  /* you may use max-width: 100px; to limit the size */
  flex-shrink: 1;
  flex-grow: 0;
  box-sizing: border-box;
  height: 50px;
  margin: 0;
}

<div class="container">
  <div class="row row-3">
    <figure>Fig. 1</figure>
    <figure>Fig. 2</figure>
    <figure>Fig. 3</figure>
  </div>
  <div class="row row-2">
    <figure>Fig. 4</figure>
    <figure>Fig. 5</figure>
  </div>
  <div class="row row-1">
    <figure>Fig. 6</figure>
  </div>
</div>

Answer 2

inline-block 元素具有在标记后包含空格的“有趣”方式。您有 2 种可能性来删除空格：

1. 正如@Breezer 建议的那样，将display: flex; 添加到父容器中。
2. 在每个图之后删除 html 中的空格，如下所示：

       <figure>
           <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
           <figcaption>
               Fall Berry Blitz Tea
           </figcaption>
       </figure><figure>
           <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
           <figcaption>
               Spiced Rum Tea
           </figcaption>
       </figure><figure>
           <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
           <figcaption>
               Seasonal Donuts
           </figcaption>
       </figure>
   

Answer 3

在容器上使用display: flex 就足够了。

此外，<img> 标签需要无单位的width 和height 属性（没有“px”）：

.container3 {
  width: 1000px;
  height: 600px;
  display: flex;
  justify-content: space-between;
}

.container3 figure {
   margin: 0;
}

  <div class="container3">
<figure>
  <img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="berry blitz">
  <figcaption>
    Fall Berry Blitz Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="spiced rum">
  <figcaption>
    Spiced Rum Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="donut">
  <figcaption>
    Seasonal Donuts
  </figcaption>
</figure>
</div>