如何在div包装img中删除不需要的空间？

Question

jsfiddle

I have:

HTML:

<div>
    <img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Peace_dove_icon.svg' width='50' height='50'>
</div>

CSS:

div{
    display:inline-block;
    position: relative;
    margin: 0;
    border: 0;
    padding: 0;
    overflow: visible;
}

but if you inspect the page you should hopefully see a seemingly arbitrary 5px extra on the bottom of the div tag.

how can I get rid of this?

Answer 1

It's the descender of the img. Images behave like words and sit on the baseline in the container, which leaves space below them for descenders.

Solution: give the img display:block or use properties like vertical-align , position or float , whichever suits the situation best.

I updated the fiddle - new one here - but I must say, there is no visible difference in this case. There is nothing on the screen except the image.

Answer 2

You can use the vertical-align as by default, images are rendered inline, like a letter.

or set the style="display: block;"

Answer 3

Just give the div this css rule:

height: 50px;

Here is a working fiddle:

http://jsfiddle.net/Hive7/9JU3T/1/

Answer 4

line-height:0; for the div solves the problem, too!