css - 画像を含むdivの下部のスペース

Question

このフィドルの場合、なぜ下部にスペースがあるのdiv#imageDivですか？

JSFiddle

<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;
}

</ p>

</ p>

Answer 1

画像をに設定しますimg { display: block; }。また、次回はここにコードを追加して、リンク切れを防ぎ、ここでコードを簡単に確認できるようにしてください。

Answer 2

画像を下に垂直に配置すると、スペースがなくなります。

jsFiddleの例

img {
    vertical-align:bottom;
}

Answer 3

それを達成するためにマージントッププロパティを使用することもできます

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

PS比較的古いブラウザをサポートすることを計画している場合は、cssで負の値を回避することは常に素晴らしいことです