html，css - 图片下方奇怪的隐形边距
我在这里疯了，不知何故，在我页面中的所有图像下方有一个间隙，代码中不存在的边距。 即使 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;
}
I'm going bananas here, somehow below all of my images in my page there is a gap, a margin which isn't there in the code.
Even Firebug can't see it but Firefox and Safari are rendering it - EVEN WITHOUT CSS AT ALL!
This never happened to me before...!
<!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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这其实并不少见。这是因为图像是内联元素，因此放置在文本基线上的图像底部与文本行底部之间存在一些空间。
最简单的解决方案是简单地使用
display:block;将图像转换为块元素。使用float:left;或float:right;浮动图像也可以将其变成块元素。调整
vertical-align、font-size和line-height等属性也可能会影响距离，但它并不像它那样强大并没有真正消除效果。在某些情况下它可能仍然会出现。相关问题：
XHTML 1.0 Strict 中图像下方不需要的间距
为什么我的图像有额外的间距？
IE图像间距问题
This is actually not that uncommon. It's because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.
The easiest solution to this is to simply use
display:block;to turn the image into a block element. Floating the image usingfloat:left;orfloat:right;also works as that also turns it into a block element.Adjusting properties like the
vertical-align,font-sizeandline-heightmay also affect the distance, but it's not as robust as it doesn't really remove the effect. It might still appear in some circumstances.Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue
很抱歉三年后回答这个问题，但是这个页面是第一个谷歌页面，我感到有责任.....答案：只添加“vertical-align：top;”到 img 标签位于 a 标签内。
sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility ..... answer: only add "vertical-align: top;" to img tag inside a tag.
对我
来说，包装容器就达到了目的。
For me
on the wrapping container did the trick.
尝试将 DOCTYPE 部分更改为：
您还可以检查以下内容： http://www.emailonacid .com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails
Try to change the DOCTYPE section to:
You can also check this: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails
嗯，我明白了。
这是一个组合
Well, I got it.
it was a combination of