使用时如何减少图像之间的空间<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的评论添加了另一个片段：

.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

内联块元素具有"有趣的"；在标签后面包含空白的方式。您有两种可能删除空白：

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>