Get rid of space underneath inline-block image
HtmlCssLayoutHtml Problem Overview
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?
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;
}
Html Solutions
Solution 1 - Html
Write vertical-align:top;
. Write like this:
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Check this http://jsfiddle.net/dJVxb/4/
Solution 2 - Html
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
.