Space at bottom of div containing image

Question

For this fiddle, why is there a space at the bottom of div#imageDiv?

<div>
<div>
<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />      
</div>
</div>
</div>
<div id="text"><div id="inner">text goes here</div></div>        

html {
  line-height: 1.5em;
}
#text {
  background-color: grey;
  margin-top:-7px;
}

score 14 · Accepted Answer · answered Aug 08 '12 at 16:28

14

Set your image to img { display: block; }. And please next time add your code here on SO to prevent link rot and lets us easily review your code here.

answered Aug 08 '12 at 16:28

PeeHaa

71,436
58
190
262

So do inline elements automatically create some 'padding' when inside block level elements? Where can I read up on this, ive tried googeling but im not finding anything relevant. Thanks – Evanss Aug 08 '12 at 16:44
@jdln 1 sec. I'll grab a link to the spec for you :) – PeeHaa Aug 08 '12 at 16:44

score 1 · Answer 2 · answered Aug 08 '12 at 16:25

1

Give your image a bottom vertical alignment and the space goes away.

jsFiddle example

img {
    vertical-align:bottom;
}

answered Aug 08 '12 at 16:25

j08691

204,283
31
260
272

@PeterVR - Check your CSS son, "The vertical-align CSS property specifies the vertical alignment of an inline or table-cell element." per https://developer.mozilla.org/en-US/docs/CSS/vertical-align – j08691 Aug 08 '12 at 16:50

score -1 · Answer 3 · answered Aug 08 '12 at 16:37

-1

you could also margin-top property to achieve that

http://jsfiddle.net/meetravi/7Knyx/14/

P.S Its always great to avoid negative values in css if you are planning to support relatively old browsers

answered Aug 08 '12 at 16:37

Ravi

3,132
5
24
35

1

I consider this a quick and very dirty fix, not an actual answer as to the how and way of the problem... – Pevara Aug 08 '12 at 16:48
Yeah I know its dirty so only I mentioned it creates lot of errors with old browsers... – Ravi Aug 08 '12 at 20:16

Space at bottom of div containing image

3 Answers3

Linked