html - 图内 img 和 figcaption 之间不需要的空格

Question

为什么图中的 img 和 figcaption 之间有空白？img 和 figcaption 的 margin 和 padding 都是 0。

img {
  width: 200px;
}

figcaption {
  background-color: hsla(0, 0%, 0%, .5);
}

<figure>
  <img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&d=identicon&r=PG&f=1" />
  <figcaption>Hello</figcaption>
</figure>

(我不是问如何删除这个空格，我是问为什么它在那里。)

Answer 1

因为 image 是一个 inline element 它在底部提供了额外的空间，你可以通过 vertical-align 来修复它

img {
  width: 200px;
  vertical-align: middle;
}
figcaption {
  background-color: hsla(0, 0%, 0%, .5);
}

<figure>
  <img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&d=identicon&r=PG&f=1" />
  <figcaption>Hello</figcaption>
</figure>