gatsby-plugin-image produces ghost padding on the bottom of images

[MadMaxMcKinney]

I'm trying to put a wrapper around the StaticImage component from gatsby-plugin-image however I'm getting some ghost padding on the bottom of the images. I can't see anything in the CSS that is providing the padding. Does anyone know what I'm missing?

Before:

Hovering (the ghost padding on bottom):

The generated code for the image and the wrapper:

<div class="border border-transparent rounded overflow-hidden transition-all hover:border-white" href="google.com" target="_blank" rel="noopener noreferrer">
   <div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">
      <div style="max-width: 1242px; display: block;"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='2688' width='1242' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width: 100%; display: block; position: static;"></div>
      <div aria-hidden="true" data-placeholder-image="" style="opacity: 0; transition: opacity 500ms linear 0s; background-color: rgb(40, 8, 56); position: absolute; inset: 0px;"></div>
      <picture>
         <source type="image/webp" srcset="/static/e86d7abb354fcea0f1a3875c921a46f0/ce4e3/MM_Support_Wallpaper_1.webp 311w,
            /static/e86d7abb354fcea0f1a3875c921a46f0/4e4a8/MM_Support_Wallpaper_1.webp 621w,
            /static/e86d7abb354fcea0f1a3875c921a46f0/9326b/MM_Support_Wallpaper_1.webp 1242w" sizes="(min-width: 1242px) 1242px, 100vw">
         <img width="1242" height="2688" data-main-image="" sizes="(min-width: 1242px) 1242px, 100vw" decoding="async" src="/static/e86d7abb354fcea0f1a3875c921a46f0/69636/MM_Support_Wallpaper_1.png" srcset="/static/e86d7abb354fcea0f1a3875c921a46f0/6f9ec/MM_Support_Wallpaper_1.png 311w,
            /static/e86d7abb354fcea0f1a3875c921a46f0/b0f4f/MM_Support_Wallpaper_1.png 621w,
            /static/e86d7abb354fcea0f1a3875c921a46f0/69636/MM_Support_Wallpaper_1.png 1242w" alt="Wallpaper 1" style="object-fit: cover; opacity: 1;">
      </picture>
      <noscript></noscript>
   </div>
</div>

Gatsby plugins and versions

    "gatsby": "^2.32.12",
    "gatsby-image": "^2.11.0",
    "gatsby-plugin-google-analytics": "^2.11.0",
    "gatsby-plugin-image": "^1.2.1",
    "gatsby-plugin-layout": "^1.10.0",
    "gatsby-plugin-manifest": "^2.12.1",
    "gatsby-plugin-postcss": "^3.7.0",
    "gatsby-plugin-react-helmet": "^3.10.0",
    "gatsby-plugin-sharp": "^2.14.3",
    "gatsby-plugin-styled-components": "^3.10.0",
    "gatsby-remark-images": "^3.11.1",
    "gatsby-remark-images-medium-zoom": "^1.7.0",
    "gatsby-remark-responsive-iframe": "^2.11.0",
    "gatsby-source-dribbble": "^2.1.3",
    "gatsby-source-filesystem": "^2.11.1",
    "gatsby-source-medium": "^2.10.0",
    "gatsby-transformer-remark": "^2.16.1",
    "gatsby-transformer-sharp": "^2.12.1",

[MadMaxMcKinney]

I tested this with regular html img tags and there is no extra spacing at the bottom. This appears to be uniqe to StaticImg

[MadMaxMcKinney]

Update: It appears changing .gatsby-image-wrapper-constrained to be set to block INSTEAD of the default inline-block fixes the issue of having the additional space at the bottom. However, I don't know why that fixes it. Thoughts?

[MadMaxMcKinney]

Solved: As mentioned above setting the display: block will fix the extra bottom margin. Here's why it was happened for anyone curious.

I wanted to link to the images being shown so I wrapped the StaticImage with an a tag. That's when the extra space showed up! I eventually saw on the .gatsby-image-wrapper-constrained class there was a display: inline-block and if you changed it to display: block it would fix the issue. The issue also only appeared when there was a wrapping container around the StaticImage. Wellll... If you have display: inline-block on an image it will provide space on the bottom to make room for descenders (since inline-block treats content like it was text). Descenders are parts of letters that reach down, like in 'y' and 'g'. So there you go! That's why there was that issue and how it got fixed!