Mystery White Space Underneath Image Tag

Mystery white space underneath image tag

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;

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

Demonstration of descenders

You can:

  • adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
  • change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img { vertical-align: middle;}
#align-base img { vertical-align: bottom;}
#display img { display: block;}
<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>
<div id="align-middle"><h1>vertical-align: middle</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div> <div id="align-base"><h1>vertical-align: bottom</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display"><h1>display: block</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>

Remove white space below image

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:

.youtube-thumb img { display: block; }

Why does my image have space underneath?

Images (and inline-block elements in general) are treated like a character.

As such, they obey the rule of the baseline.

In normal text, the baseline is the line across the bottom of most letters, such as in this sentence.

But some letters, such as p, q, j and so on, have tails that drop below the baseline. In order to prevent these tails from colliding with letters on the next line, space is reserved between the baseline and the bottom line.

This diagram illustrates the different lines used by text:

WHATWG's baseline diagram
(Image from WHATWG)

So, the image is aligned to the baseline, even if there is no text. Fortunately, the fix is very simple:

img {vertical-align:bottom}

This will align the image to the bottom of the line, also removing the mystery space.

Just be careful, if your image is small (smaller than the line height), you may start seeing mystery space appearing above the image instead. To fix this, add line-height:1px to the container element.

Hopefully this helps the many people I've seen ask about this and similar problems!

CSS3: Strange padding on bottom of an image

The img is an inline element, so it takes the line-height into consideration. To avoid the space below the image you can do one of the following things:

  • set float: left on the image
  • set display: block on the image
  • set line-height: 0 on the .info div

White space at bottom of anchor tag

The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

Adjust the vertical-align with CSS: img{vertical-align: bottom}



Related Topics



Leave a reply



Submit