The strange <img> gap in HTML
Tags: html, web, css, beginners
Published: 2017-09-23 10:27:43

---
title: The strange <img> gap in HTML
published: true
description: 
tags: HTML, Web, CSS, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/v8bydjggw54pse4ud1hc.png
---

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](https://thepracticaldev.s3.amazonaws.com/i/hrf2l4jwoxsdfdxxlz7k.png)



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:
- http://gtwebdev.com/workshop/gaps/image-gap.php
- https://developer.mozilla.org/en-US/docs/Images%2C_Tables%2C_and_Mysterious_Gaps
- or just search for "html img gap" or "img tag gap" in your favorite search engine and let the thousand Stack Overflow issues sink in your mind

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](https://developer.mozilla.org/en-US/docs/Web/HTML) on the Mozilla Developer Network.*

*Some further reading:*

- *[HTML Inline/Block elements cheatsheet](https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet)*
- *[Block Formatting Context](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/)*
- *[CSS `display` documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/display)*
- *[Article on the CSS `display` values](https://quirksmode.org/css/css2/display.html)*