title: Removing Space Under HTML Figure Tag with Image
body: <p>I'm trying to understand why removing space below HTML figure tag requires a hack.</p>
  
  <p>In Chrome, removing the default "vertical-align: baseline" works, but when you add that in the CSS, it doesn't. The only hack I was able to come up with to make it work is to add a wrapper div around the image and then set "line-height: 0".</p>
  
  <pre><code>&lt;figure style="margin: 0;"&gt;
      &lt;div style="line-height: 0;"&gt;
          &lt;img src="http://wellnesscounselingmilwaukee.com/wp-content/uploads/2015/07/4-Nature-Wallpapers-2014-1.jpg"&gt;
      &lt;/div&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>Any idea? It makes no sense at all whatsoever.</p>
  
  <p>Here's the screenshot from JSFiddle for those who somehow can't replicate. I tested this on latest version of Chrome and Safari. This is the exact same issue with table and people normally use a different hack for that. The screenshot doesn't show the part that I unchecked "line-height: 0;" btw in case you were wondering. If you copy and paste the code into JSFiddle, you have to uncheck it to see the issue.</p>
  
  <p><a href="https://i.stack.imgur.com/sgT9e.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/sgT9e.jpg" alt="enter image description here"></a></p>
  
  <p>Here's the link to the one you don't have to modify.</p>
  
  <p><a href="https://jsfiddle.net/415s3amz/1/" rel="noreferrer">https://jsfiddle.net/415s3amz/1/</a></p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>If you have an option to set the image to display: block; It will also solve the issue. If not, use line-height: 0; What this seems to have proven based on the tests is that this has to do with default behavior of the image element. However, it still makes no sense that unchecking vertical-align: baseline works, but adding the same CSS doesn't work.</p>