html，css - 图片下方奇怪的不可见边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1383048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html, css - weird invisible margin below pictures
提问by Guffa
i'm going bananas here, somehow below all of my images in my page there is a gap, a margin wich isn't there in the code. Even Firebug can't see it but Firefox and Safari are rendering it - EVEN WITHOUT CSS AT ALL!
我要发疯了，不知何故，在我的页面中的所有图像下方都有一个间隙，代码中没有边距。即使 Firebug 也看不到它，但 Firefox 和 Safari 正在渲染它 - 即使根本没有 CSS！
Never happend 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;
}
回答by Guffa
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 using float:left;or float:right;also works as that also turns it into a block element.
对此最简单的解决方案是简单地使用display:block;将图像转换为块元素。使用float:left;或浮动图像float:right;也可以将其变成块元素。
Adjusting properties like the vertical-align, font-sizeand line-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.
调整vertical-align,font-size和等属性line-height也可能会影响距离，但它并不强大，因为它并没有真正消除效果。在某些情况下它可能仍会出现。
Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue
回答by user3051858
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 imgtag inside atag.
很抱歉在 3 年后回答这个问题，但这个页面在第一个谷歌页面，我觉得有责任......答案：只添加“垂直对齐：顶部；” 到标签内的img标签。
回答by leymannx
For me
为了我
font-size: 0;
line-height: 0;
on the wrapping container did the trick.
在包装容器上做到了这一点。
回答by LRA
Try to change the DOCTYPE section to:
尝试将 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">
You can also check this: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails
您还可以查看：http: //www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails
回答by LRA
Well, I got it.
嗯，我明白了。
it was a combination of
这是一个组合
font-size: 0px;
line-height: 1;
