html，css - 图片下方奇怪的不可见边距答案

【问题标题】：html, css - weird invisible margin below pictureshtml，css - 图片下方奇怪的不可见边距
【发布时间】：2010-11-25 20:45:53
【问题描述】：

我要疯了，不知何故，在我页面中的所有图像下方都有一个间隙，即代码中不存在的边距。甚至 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;
}

【问题讨论】：

有时可能是由于 HTML 中的空白，如 stackoverflow.com/questions/361775/ie6-extra-padding-on-bottom/… other answer 所示。
在你开始你的 html 之前，最好在你的 style.css 中包含一个 reset.css 库
搜索 eric meyer reset.css

标签： css image margin

【解决方案1】：

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

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

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

【讨论】：

设置 display: block 在最初写下这个答案 12 年后仍然是一个有用的建议。

【解决方案2】：

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

【讨论】：

我不知道是什么或如何解决了我在 div 中的 img ?

【解决方案3】：

对我来说

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

在包装容器上成功了。

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

嗯，我明白了。

这是一个组合

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

【讨论】：