title: Unwanted space between img and figcaption inside figure
body: <p>Why there's white space between an img and figcaption inside figure?
  margin and padding of both img and figcaption are 0.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    width: 200px;
  }
  
  figcaption {
    background-color: hsla(0, 0%, 0%, .5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure&gt;
    &lt;img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&amp;d=identicon&amp;r=PG&amp;f=1" /&gt;
    &lt;figcaption&gt;Hello&lt;/figcaption&gt;
  &lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(I'm not asking how to remove this space, I'm asking why it's there.)</p>