67

How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?

http://jsfiddle.net/dJVxb/2/

HTML: 

<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >                 
</div>

CSS: 

​#wrapper {
    background:green;
}
img {
    display:inline-block; 
    margin:0;
}

enter image description here ​

Yarin
  • 173,523
  • 149
  • 402
  • 512

2 Answers2

162

Write vertical-align:top;. Write like this:

img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}

Check this http://jsfiddle.net/dJVxb/4/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 4
    To follow up, looks like all you need to do is `vertical-align:top` or `vertical-align:middle` - Anything but the defaut `vertical-align:baseline` will fix it. – Yarin Aug 26 '13 at 20:19
  • 6
    For an explanation, look at this example: https://jsfiddle.net/1p1v896d/. When you use `inline-block` it treats the image like a big character of text. It aligns it so that it will flow on the same baseline as text. But, the baseline of text is not the very bottom, because characters like `g` and `j` need to extend beyond characters like `a` and `b`. When you add `vertical-align: top` to the image, it aligns the image to the top of the baseline, so the extra space for tall characters is also moved up. As you can see in the example, using `vertical-align: middle` will also work. – Gavin Oct 04 '17 at 18:11
  • 1
    even after all of these years, CSS still finds new ways to disappoint me :) – A.R. Sep 11 '20 at 02:10
58

That added space is there to make room for descenders were there inline text as well. Descenders are parts of letters that reach down, like in 'y' and 'g'.

If you need to retain a vertical-align property of center or baseline, you can fix this by setting your line-height to 0.

CourtDemone
  • 5,772
  • 6
  • 23
  • 25