Mystery white space underneath image tag [duplicate]

I just changed the header image on my site from

<div style="background-image... width=1980 height=350>

to using

<img src="... style="width:100%;">

so the image would scale down which it now does...

But now I have this mysterious 10px gap or so.

I've checked the inspector in Chrome, and I just can't see what's causing the space. I've searched other posts but can't find anything that applies.

Anyone out there have any idea? Appreciate any help, Bob :)

Solution 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?

Solution 2:

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;

Solution 3:

Add

display: block;

to the <img>.