html，css - 图片下方奇怪的不可见边距
Posted
技术标签:
【中文标题】html，css - 图片下方奇怪的不可见边距【英文标题】：html, css - weird invisible margin below pictures 【发布时间】：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 中的空白，如 ***.com/questions/361775/ie6-extra-padding-on-bottom/… other answer 所示。 在你开始你的 html 之前，最好在你的 style.css 中包含一个 reset.css 库 搜索 eric meyer reset.css 【参考方案1】：这实际上并不少见。这是因为图片是内联元素，所以图片底部（位于文本基线上）与文本行底部之间存在一定的空间。
最简单的解决方案是简单地使用display:block; 将图像转换为块元素。使用float:left; 或float:right; 浮动图像也可以，因为这也会将其变成块元素。
调整vertical-align、font-size 和line-height 之类的属性也可能会影响距离，但它的鲁棒性并不强，因为它并没有真正消除影响。在某些情况下可能仍会出现。
相关问题：Unwanted spacing below images in XHTML 1.0 StrictWhy have my images got extra spacing?IE image spacing issue
【讨论】：
设置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;
【讨论】：
以上是关于html，css - 图片下方奇怪的不可见边距的主要内容，如果未能解决你的问题，请参考以下文章