html - Unwanted space between img and figcaption inside figure

Question

Why there's white space between an img and figcaption inside figure? margin and padding of both img and figcaption are 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

As image is a inline element it gives extra space at the bottom you can fix it by giving 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>