juminoz juminoz - 1 year ago 75
CSS Question

Removing Space Under HTML Figure Tag with Image

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

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.

enter image description here

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



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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download