CODEWITHSUNDEEP
htmlcssstyles
Daniel Robinson
Daniel Robinson

Reputation: 14878

how to remove unwanted space in div wrapping an img?

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?

Upvotes: 0

Views: 219

Answers (4)

Andrei Terecoasa
Andrei Terecoasa

Reputation: 572

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

Upvotes: 0

Hive7
Hive7

Reputation: 3675

Just give the div this css rule:

height: 50px;

Here is a working fiddle:

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

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172448

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

or set the style="display: block;"

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46569

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.

Upvotes: 1

Related Questions