Removing Space Under HTML Figure Tag with Image

Question

I'm trying to understand why removing space below HTML figure tag requires a hack.

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".

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://wellnesscounselingmilwaukee.com/wp-content/uploads/2015/07/4-Nature-Wallpapers-2014-1.jpg">
    </div>
</figure>

Any idea? It makes no sense at all whatsoever.

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.

Here's the link to the one you don't have to modify.

https://jsfiddle.net/415s3amz/1/

---

Update:

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.

Answer 1

You need to change the vertical alignment of the image from baseline (the default) to top:

img {
  vertical-align: top
}

jsFiddle example Inline elements leave space for text descenders (characters that go below the line line g, y, j) so you need to change the vertical alignment if you want to get rid of that gap.

Answer 2

margin:0 should remove the default margins. The <figure> tag is taking the size of the div within it which is a block level element and therefore expands full width when empty. See snippet... Both the figure and div have the same dimensions (width of container, height 150)

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>

Additional snippet showing no space below the figure

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>
<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>