32

我要疯了，不知何故，在我页面中的所有图像下方都有一个空白，代码中不存在一个空白。甚至 Firebug 也看不到它，但 Firefox 和 Safari 正在渲染它——即使根本没有 CSS！

这在我以前从未发生过……！

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

5 回答 5

87

这实际上并不少见。这是因为图像是内联元素，所以图像底部（位于文本基线上）与文本行底部之间存在一些空间。

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

调整vertical-align,font-size和之类的属性line-height也可能会影响距离，但它的鲁棒性并不强，因为它并没有真正消除效果。在某些情况下可能仍会出现。

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

于 2009-09-05T12:25:00.523 回答
17

很抱歉在 3 年后回答这个问题，但是这个页面在第一个谷歌页面上，我觉得有责任.....回答：只添加“vertical-align：top;” 在标签内添加img标签。

于 2013-12-29T04:47:35.113 回答
8

为了我

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

在包装容器上就成功了。

于 2016-03-21T09:33:52.653 回答
1

尝试将 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

于 2012-09-28T01:28:20.880 回答
-3

嗯，我明白了。

这是一个组合

font-size: 0px;
line-height: 1;
于 2009-09-05T11:20:48.110 回答