Logo - Albert Walicki
CSS

Extra space below image

One of the most common problems that almost every junior frontend developer had

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!

JAVASCRIPT

How to change element's class with Javascript?

Short cheatsheet for adding, removing and toggling css classes

CSS

How to limit text to n lines with CSS?

Sometimes, we have to trim text to limit the number of lines.

Logo - Albert Walicki

Hello, i’m Albert Walicki. i’m a frontend developer and cofounder of development & design agency Hype4 and education platform Hype4 Academy. 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