html - 图内img和figcaption之间的多余空间

为什么图形中的img和figcaption之间存在空白？
img和figcaption的边距和填充均为0。

的HTML

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

的CSS

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

（我不是在问如何删除这个空间，我是在问为什么它在那里。）

最佳答案

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

关于html - 图内img和figcaption之间的多余空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55548542/