Why does my DIV extend below my image even though they are the same height?

Question

I have am trying to format both a DIV and the image within it responsively.

Here is my CSS:

#masthead { width:100% ;
    height:auto ;
    max-height:350px ;
    background:navy ;
    text-align:center ;
    overflow:hidden ;
}

#masthead img { width:100% ;
    max-width:300px ;
    height:auto ;
    margin:0 auto ;
}

and my HTML:

<div id="masthead">
    <img src="http://i.imgur.com/K9aZKGI.png" />
</div>

The image is 300px wide by 350px high - the same height as the DIV. So why does the DIV extend 3 or 4 px below the image?

Here is the Jsfiddle: http://jsfiddle.net/m9sqn7hh/1/

It's driving me nuts. Any help is appreciated :)

Best,

Cynthia

Removing the width and max-width attributes, and setting height:100%; on the img will accomplish what you're looking for I believe. See https://jsfiddle.net/e11j88yr/ — Joe Bauer, Mar 30 '15 at 15:54

score 0 · Answer 1 · answered Mar 30 '15 at 15:47

0

An img should be given vertical-align:bottom; or top, else it will have a spance under it

answered Mar 30 '15 at 15:47

vsync

118,978
58
307
400

While true, it doesn't answer the question: `So why does the DIV extend 3 or 4 px below the image?` – Hashem Qolami Mar 30 '15 at 15:50
1

what why? why do you ask a question that has been asked countless times instead of using the search? that's a more interesting question – vsync Mar 30 '15 at 15:57
I didn't ask the question — I've never done that here on SO. – Hashem Qolami Mar 30 '15 at 15:59
ho it was another guy sorry, i thought you were the OP. by bad – vsync Mar 30 '15 at 16:06

Why does my DIV extend below my image even though they are the same height?

1 Answers1