Logo - Albert Walicki

Extra space below image

One of the most common problems that almost every junior frontend developer has is extra space below the image. Let's learn how to fix it with CSS

This space below the image is not a bug or an issue, and it is a default browser behavior. Images created with <img /> tag by default has display: inline property. Every text, not only in programming, have various properties. This extra gap exists because of the descender. Long story short: descender is the gap below the baseline of the font. So, if our image is treated as text, it has to have a descender.

Image display inline with extra gap at the bottom

There are multiple different ways to fix this problem:

  • change display property to block

  • add vertical-align: middle; to center image in div

  • add line-height: 0; property do the div *****

  • change font-size of the div to 0px; *****

I can recommend the first solution for this problem. It's the easiest one.

I don't recommend the last two solutions because it will set font-size or line-height to all text nodes in div.
Also, font-size: 0 will affect image ALT font-size. If your image doesn't work, your alt text won't display too (okay, it will display but with font-size:0, so it will be invisible.

Image below was fixed by adding display:block to image.

Image display block without extra gap at the bottom

See more solutions!


How to change element's class with Javascript?

Short cheatsheet for adding, removing, and toggling CSS classes in vanilla javascript. You no longer have to remember it!


How to limit text to n lines with CSS?

Sometimes, we have to trim text to limit the number of lines. There are a few ways to do it with pure CSS. Let's learn how to achieve that

Logo - Albert Walicki

Hello, I'm a frontend developer with over six years of experience, freelancer. I'm also a mentor for junior frontend developers. I wrote a book for Junior Frontend developers called Frontend Unicorn.

BlogGlassmorphismAurora UIShapes in CSSUnique css illustrations

Get in touch!

Have a question or need a project? Contact me!

© 2020-present Albert Walicki. All Rights Reserved