html,css - 图片下面的奇怪的隐形边距

我在这里去香蕉,不知怎的,在我的页面中我的所有图像下面都有一个间隙,代码中没有边距.甚至Firebug都看不到它,但Firefox和Safari正在渲染它 - 即使没有CSS也没有!

从来没有发生在我身上......!

    





    

        

            
            

                
Main
                
System
                
View
                
Policy
            
            

        
        

        

    




body{
    background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
    width:864px;
    margin: 8px auto 0 auto;
}
#sidebar{
    /*width:139px;*/
    float: left;
}
#sidebar_bottom{
    height:10px;
    background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
    margin-bottom: 2px;
}
#sidebar #menu{
    background: #f2f2f2;
    border: 0 1px solid #cecece;
    margin: 0;
    list-style: none;
}

Guffa.. 79

这实际上并不罕见.这是因为图像是内联元素,因此在图像底部(文本基线和文本行的底部)之间存在一些空间.

最简单的解决方案是简单地使用display:block;将图像转换为块元素.使用float:left;或浮动图像float:right;也会将其转换为块元素.

调整像这样的属性vertical-align,font-size也line-height可能会影响距离,但它并不像它真正消除效果那样强大.它可能仍然出现在某些情况下.

相关问题:
XHTML 1.0中的图像下方不需要的间距严格
为什么我的图像有额外的间距？
IE图像间距问题

这实际上并不罕见.这是因为图像是内联元素,因此在图像底部(文本基线和文本行的底部)之间存在一些空间.

最简单的解决方案是简单地使用display:block;将图像转换为块元素.使用float:left;或浮动图像float:right;也会将其转换为块元素.

调整像这样的属性vertical-align,font-size也line-height可能会影响距离,但它并不像它真正消除效果那样强大.它可能仍然出现在某些情况下.

相关问题:
XHTML 1.0中的图像下方不需要的间距严格
为什么我的图像有额外的间距？
IE图像间距问题

很抱歉3年后回答这个问题,但这个页面在第一个谷歌页面,我觉得有责任.....回答:只添加"vertical-align:top;" 到的img标记内一个标签.

为了我

font-size: 0;
line-height: 0;

在包装容器上做了伎俩.