使用<figure>标签时如何缩小图片间距以实现三图同行？

问题根源 #

1. 浏览器默认给<figure>标签添加了margin，会额外占据宽度
2. 使用inline-block时，HTML中标签之间的空白字符（换行、空格）会被解析为空白，占据额外宽度，导致三张总宽度900px的图片加上空白和默认margin后，超出了1000px的容器宽度，触发换行。

解决方案 #

方案一：使用Flex布局（推荐）

Flex布局可以彻底避免空白字符问题，还能轻松控制间距：

.container3 {
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
  display: flex; /* 开启flex布局 */
  gap: 20px; /* 自定义图片间的间距，按需调整 */
}

.container3 figure {
  margin: 0; /* 移除浏览器默认的margin */
}

HTML部分无需修改，三张figure会自动排列在同一行，间距由gap精准控制。

方案二：消除inline-block的空白字符+移除默认margin

如果坚持使用inline-block，可以通过以下方式解决：

1. 移除HTML中的空白字符：把figure标签首尾相接，消除换行和空格：

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

2. 移除figure的默认margin：

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

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
  margin: 0; /* 去掉默认margin */
  margin-right: 10px; /* 自定义间距，按需调整 */
}

.container3 figure:last-child {
  margin-right: 0; /* 最后一个figure去掉右侧间距，避免容器宽度溢出 */
}

方案三：通过字体大小消除空白

给容器设置font-size: 0消除空白字符宽度，再给figure恢复字体大小：

.container3 {
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
  font-size: 0; /* 消除空白字符的宽度 */
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  font-size: 16px; /* 恢复figcaption的正常字体大小 */
  margin-right: 15px;
}

.container3 figure:last-child {
  margin-right: 0;
}

内容的提问来源于stack exchange，提问作者Hanzo-Hasashi