43

Images gain a mysterious empty space underneath, even if padding:0;margin:0 are applied.

Demonstration

screenshot

The red border should hug the image, but there is space on the bottom side.

What causes this, and how can I remove this space?

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 1
    Does this answer your question? [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – Oliver Joseph Ash Nov 15 '20 at 16:56

3 Answers3

82

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!

dgrogan
  • 2,587
  • 1
  • 17
  • 21
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 1
    @tman Thanks - first time writing a reference answer, so kinda nervous! More people need to know about this. – Niet the Dark Absol Jul 28 '13 at 07:20
  • Nice. Why does `line-height: 1px` work? It's a hack, so is there a slightly more sensible value we can use? – Andy G Jul 28 '13 at 07:29
  • Ideally, use whatever height is equal to the height of the image. Basically the `1px` makes the space reserved for text real small, so the image will "stretch" the line and ensure no extra space is left. – Niet the Dark Absol Jul 28 '13 at 07:30
  • @Kolink: Seeing as this is going to be closed (3/5 votes), it might be nice to repost this answer on the duplicate; its a more detailed answer than the others currently on there. – Matt Jul 28 '13 at 11:35
  • 1
    While there are other good solution answers, this is the best explanation of _why_. **"the image is aligned to the baseline, even if there is no text"** meaning that even when you specify the image size, the _true_ height includes the (font-dependent) delta between bottom and baseline, _a value you will never see in the style inspector!_ – John Neuhaus Nov 02 '20 at 18:41
6

Changing img to a block level element

img {
  display: block;
}

will also remove the space below the image.

Astrotim
  • 2,152
  • 19
  • 23
  • But it prevents you from having multiple images side-by-side. – Niet the Dark Absol Jul 28 '13 at 07:47
  • 1
    The [demonstration](http://jsfiddle.net/cLETP/) link in the question shows the `img` element wrapped in a `div` element. A `div` is block level by default, so this in itself would prevent multiple instances of the `div` + `img` displaying side-by-side. If the images were adjacent in the markup, then `display: inline-block` would both remove the space below and display the elements side-by-side. – Astrotim Jul 28 '13 at 08:11
  • 1
    @Astrotim - That's not correct. `display: inline-block` will not remove the space below. – Alohci Jul 28 '13 at 10:03
  • 1
    @Alohci, I stand corrected. One would need to apply `display: inline-block` to the parent `div` and `display: block` to the child `img` for side-by-side images with the space removed. – Astrotim Jul 28 '13 at 11:07
  • 1
    Up-voted because this *does* solve the problem presented in the question. The comment above by @NiettheDarkAbsol is not listed as a concern in the original question, and isn't cause for this answer to be downvoted. – TylerH Dec 29 '14 at 00:36
  • @TylerH I agree, this answer doesn't deserve to be downvoted. Especially since the wording includes "will *also* remove", marking the code as an alternative that may be appropriate in certain situations. – Niet the Dark Absol Dec 29 '14 at 00:44
0

check out this CSS jsfiddle CSS

div {border:1px solid red;width:100px;line-height:0}
img {width:100px;}
vas
  • 962
  • 1
  • 9
  • 21