HTML，CSS - 怪异看不见下面的图片保证金(html, css - weird invisi

我在这里要香蕉，不知何故下面我所有的图片在我的网页上还有一定的差距，保证金至极是不存在的代码。即使萤火虫还看不出来，但Firefox和Safari都渲染了 - 即使没有CSS在所有！

以前从未happend给我...！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>

    <div id="container">
        <div id="sidebar">
            <img src="images/logo.png" id="logo" />
            <ul id="menu">
                <li class="menu1">Main</li>
                <li class="menu1">System</li>
                <li class="menu1">View</li>
                <li class="menu1">Policy</li>
            </ul>
            <div id="sidebar_bottom"></div>
        </div>
        <div id="main_content"></div>
        <div class="clear"></div>
    </div>

</body>
</html>

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

Answer 1:

这实际上并不是少见。这是因为图像是内联元件，从而存在图像，它被放置在文本的底部线的底部，和文本行的底部之间的一些空间。

这个最简单的解决方案是简单地使用display:block; 把图像划分成块元素。浮动使用图像float:left; 或float:right; 也可以作为也把它变成一个块级元素。

调整喜欢的属性vertical-align ， font-size和line-height也可能影响的距离，但它并没有真正删除的效果是不够健壮。它可能仍然会出现在某些情况下。

相关的问题：
下面的图像不需要的间距在XHTML 1.0严格
为什么我的图像得到额外的空格？
IE浏览图像的间距问题

Answer 2:

遗憾地回答这个问题3年后，但是这个页面是在第一的谷歌网页，我感到责任.....回答：只添加“垂直对齐：首位;” 到的img 标签内的标签。

Answer 3:

为了我

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

包装容器上的伎俩。

Answer 4:

尝试将DOCTYPE部分更改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

您还可以检查此： http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails