loading...
Cover image for The strange <img> gap in HTML

The strange <img> gap in HTML

christiankaindl profile image Christian Kaindl Updated on ・2 min read

There are many frustrations that I have had in my short dev game so far, and one of them crossed my eyes very recently again while I was working on a small project of mine.

It is this strange gap when using the HTML <img> tag that made me go wild already quite a few times:

Image gap

But not this time!

The solution

The reasoning and the solution to this problem is actually really simple and has to do with the text of the box.

Wait, what? There is no text in the picture!

Brace yourself:

As it turns out, img elements are by default inline elements. This means they basically flow the same as text. As such the bottom edge of the image is aligned with the baseline of the font that is specified with the font-size attribute.

Mystery solved! Here's how you can fix this issue:

Solution 1

On your image, set vertical-align to bottom, top, text-top, text-bottom or middle

Solution 2

Set your image to display: block (Then you also have to specify a width for your image or otherwise everything will fall into the next line)

Edit: You can also fix this issue while using more modern techniques. So, setting display to flex or grid (also needs a width to be set), or their inline counterparts inline-flex and inline-grid will also work while giving more flexibility as display: block (and also work when applied to the image container).

Solution 3

Don't use images all together (makes your site faster)

Solution 4

Maybe this is exactly what you want! Aligning an image or small icon within your text flow on the baseline couldn't be easier!

Solution 5

Set the image container (parent) to line-height: 0 (does not work when the container is an inline element) or font-size: 0 (always works)

Solution 6

On the image, set float to right, left, inline-end or inline-start


In the end the "mysterious image gap" isn't that mysterious at all, and still, it is quite interesting where such simple frustrations can lead. After all, I have a more thorough understanding how inline elements behave now.

Here are some more resources if this wasn't enough:

Thank you for reading :)


Edit:

If you want to find out more about the details of HTML layout
You may also want to check out the HTML reference on the Mozilla Developer Network.

Some further reading:

Discussion

pic
Editor guide
Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
davejs profile image
David Leger

Very insightful. Everyone knows the best way to help beginners is to make them feel stupid and unwelcome for sharing what they’ve learned...

Collapse
Sloan, the sloth mascot
Comment deleted
davejs profile image
David Leger

It is not wrong to correct mistakes, but all you have done here is berate a beginner for sharing something that they have learned, calling it clickbait, and then question them for not having learned it earlier. This article clearly wasn’t written for you.
You haven’t corrected a mistake.

What exactly is wrong with the title anyway? What would you call this article?
This is a side tangent: If you ever onboard junior devs please take more care when communicating with them.

Collapse
christiankaindl profile image
Christian Kaindl Author

Thank you for commenting.

To me it wasn't obvious from the beginning and it was also not one of the first things I learned when starting with HTML (by making W3School tutorials). It was not intuitive for me to suggest that IMG elements are inline elements just by looking at websites.

Also, I guess that - despite this being in the HTML spec since version 1 - a lot of developers have experienced similar issues when using images, without knowing what causes them. It is a simple thing, but it wasn't obvious to me and I think it is not obvious to quite a few developers out there.
I think it doesn't matter if it is simple or not or if it is already around for years. If people struggle with it or don't know what it is about, it's something worth writing about. I tried to fill a gap, because I couldn't find a comprehensive article myself and wanted to make a valuable contribution. Dev.to is the perfect community for such - a community that is grateful for learning from others people's learnings, and sharing their own learnings, which is what I did.

So in that sense it was the strange <img> gap that was somehow there for me. And, assuming that other people have the same problem, the title The strange <img> gap in HTML is no clickbait at all, but rather the most helpful title for the ones who have the problem themselves, and who do not simply know that it is so simple because it was in the HTML spec since version 1. Writing an article about it was the choice that reached the most people - and hopefully helped a lot of them.

I hope that clarifies my intentions for the article.

Collapse
Sloan, the sloth mascot
Comment deleted
christiankaindl profile image
Christian Kaindl Author

I added an additional paragraph and further reading links to the end of the article.

If you have suggestions for articles and links, please let me know.

Collapse
igorjoergensen profile image
IgorJoergensen

I often find myself looking at the element panel in my console and then looking at what rules an element inherits from the agent.

I can only recommend using that whenever you have a little downtime - a lot to learn by just inspecting.

Thank you for sharing your findings, the breakdown you made are actually quite good.

Collapse
lexlohr profile image
Alex Lohr

In most cases, display: inline-block is what you want (unless you want float, which inherently formats as block content.

Collapse
christiankaindl profile image
Christian Kaindl Author

For me inline-block does not fix this particular issue. But inline-block or inline-flex can be used and they also give more flexibility.

Collapse
ben profile image
Ben Halpern

Vertical align-related issues can be so frustrating.

Collapse
minescz profile image
minescz

@christiankaindl thanks so much for this article even though it's been a few years since it was published, trust me, it's really helpful, I couldn't find any other documentation that explains it, I also looked for this issue in stackoverflow and nothing really concrete was mentioned, I am a beginner in all this, this literally saved my project, since I couldn't find any official document that has this type of info.

Collapse
hichdima_dev profile image
Hichdima_dev

global img { display: block; max-width: 100% } is always at the top of my css file

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
davejs profile image
David Leger

Seriously tho... are you actually trying to be helpful? 🙄

Thread Thread
Sloan, the sloth mascot
Comment deleted
Collapse
ultrox profile image
Marko Vujanic

@christiankaindl Thanks so much for this article, I never knew about this. I guess I never thought about what does it really mean to be inline.

I was on rollercoaster first cursing the world, to realizing this makes sense :D

Collapse
prisny02 profile image
นี่ด็อกซอนไง

I always use float: left to the image to fix this issue. But still not a solid sulution.

Collapse
christiankaindl profile image
Christian Kaindl Author

Yeah, float: left is a fast fix but it can also brak a layout very easily. A good alternative can be display: inline-flex instead of using float.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
eoloughlin profile image
Loxy

Had this yesterday. The kind of bizarre issue that is so easy to fix and yet so illusive.