Image not correctly pushing height of parent div

Question

I want a parent div to be the height of the child image, like so:

<div class="container one">
    <img src="http://placehold.it/250x250" />
</div>

The div should be exactly 250px tall. For Illustration, I created a JSFiddle here.

Now what is actually happening in FF and Chrome is that the div is just a bit taller, maybe 3 to 5 pixels.

I would like to avoid having to do nesting with unnecessary purely cosmetic markup like

<div class="container one">
    <div class="inner">
        <img src="http://placehold.it/250x250" />
    </div>
</div>

or similar.

I feel like this is horribly obvious but I just can't make any sense of it.

Change container one to container_one or something with 1 word make it size 250 250 in css.. In image css give display block .. Height width 100%.. — Ashish, Oct 18 '14 at 20:12

score 1 · Accepted Answer · answered Oct 18 '14 at 20:03

1

<img> is an inline element and adds that extra space below due to that fact. Fix it with

img {
  display: block
}

answered Oct 18 '14 at 20:03

pimmey

1

It makes sense when your image is on the same line with your text, so the space below is used by letters like g, q, p (descenders). – pimmey Oct 18 '14 at 20:12

1 Answers1