为什么一个img在一个div里有额外的空间 怎么让div自适应图片的高度

问题：默认样式下，div包裹img。div的高度会高于img的高度，这是什么原因呢？是浏览器就是这么渲染的，还是图片的某个样式属性的作用呢？除了通常设置图片display：block外，还有别的方法让div的高度自适应图片的高度吗？

代码图如下：

说明：

'vertical-align'

解决方案：

img{vertical-align:top;} /*解决方案1*/

img{display: block} /*解决方案2*/

div{line-height: 0} /*解决方案3*/

在线演示效果：http://jsfiddle.net/camnpr/rNXD5/

扩展阅读：

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

http://www.west-wind.com/weblog/posts/2008/Jun/05/Unwanted-Padding-in-IE-Image-Rendering-in-div-Tag

http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image