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

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2013/6/24

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

代码图如下:

 

说明:

'vertical-align'

Value:   baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:   baseline
Applies to:   inline-level and 'table-cell' elements
Inherited:   no
Percentages:   refer to the 'line-height' of the element itself
Media:   visual
Computed value:   for <percentage> and <length> the absolute length, otherwise as specified

 

解决方案:

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

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/why-an-image-inside-a-div-has-an-extra-space-below-the-image.html