CODEWITHSUNDEEP
html
Steve
Steve

Reputation: 4918

DIV height seems too large

I have a jsfiddle here - http://jsfiddle.net/stevea/Jpu5b/2/ - with a DIV that contains another DIV that contains an img. I haven't specified the width or height of the inner DIV so it takes on the width of the parent DIV and the height of the img it contains. 

<div id='box'>
    <div id='innerBox'> 
            <img id='cateye' src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg'/>
     </div> 
</div>

My question is, why is the height of the inner div about 5px larger than the img it contains?

Upvotes: 0

Views: 6510

Answers (2)

Mr. Smee
Mr. Smee

Reputation: 960

If you want to keep img as an inline element just add line-height: 0; to your reset.

So it would look like this: 

 * {
    margin:0px;
    padding:0px;
    line-height: 0;
}

Here is the updated fiddle http://jsfiddle.net/Jpu5b/18/

Otherwise Michael St Clairs's answer will work well.

Upvotes: 5

Michael St Clair
Michael St Clair

Reputation: 6635

Add this code and it should fix it

#cateye {
    display:block;
}

Upvotes: 2

Related Questions