Mystery white space underneath image tag [duplicate]

Answer 1

Look at this line of text. Notice there are no letters that breach the baseline.

Now look at the following sentence:

By just crossing the bridge he probably got away.

Note the letters j, g, p and y. These letters, known in typography as descenders, breach the baseline.

^{Source: Wikipedia.org}

The default value of the vertical-align property is baseline. This applies to inline-level elements.

Your img is inline-level by default and, like text, span, input, textarea and other inline boxes, is aligned to the baseline. This allows browsers to provide the space necessary to accommodate descenders.

Note that the gap is not created by margin or padding, so it's not easy to detect in developer tools. It's a slight elevation of content from the container's bottom edge resulting from baseline alignment.

Here are several ways to handle this:

1. Apply vertical-align: bottom to the img tag. In some cases bottom won't work, so try middle, top or text-bottom.

---

2. Switch from display: inline to display: block.

---

3. Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.

---

4. Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.

---

Related:

• Why is my textarea higher up than its neighbor?

Answer 2

Add

display: block;

to the <img>.

Answer 3

By default, IMG is an inline element. You need to set your IMG tag to be a block element, which can be accomplished with this style:

display: block;