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>

(I'm not asking how to remove this space, I'm asking why it's there.)

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>

Answer 2

All you need is add a display: block in img tag.

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

<figure>
  <img src="https://www.google.com/images/srpr/logo11w.png" />
  <figcaption>Hello</figcaption>
</figure>