Html 如何删除div标签之间的不可见空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5905306/
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
How to remove an invisible space between div tags
提问by Spirit
I have built several web sites and now i am having newbie problem that is driving me nuts...
我已经建立了几个网站，现在我遇到了让我发疯的新手问题......
Here's my code:
这是我的代码：
<body>
<div id="page">
<div id="page_wrapper">
<div id="header">
<h1>Heading 1</h1>
<div class="clear_both" /> </div>
</div><!-- end #header -->?
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </div>
</div><!-- end #main_menu -->?
<div id="left">
</div><!-- end #left -->?
And here's my CSS
这是我的 CSS
First i have a CSS Reset template from here: http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
首先，我从这里有一个 CSS 重置模板：http: //yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
and then on another file:
然后在另一个文件上：
body, html {
font: 10pt Verdana,Arial,sans-serif;
background: #fff;
margin: 0;
padding: 0;
text-align: left;
color: #333;
}
div {
line-height: 1.4em;
}
#page {
}
#page_wrapper {
}
#main_menu {
}
#left {
}
div.clear_both {
margin: 0;
padding: 0;
font-size: 0;
height: 0;
line-height: 0;
clear: both;
}
And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)
在下面的链接上有一个图像截图，你可以在上面看到输出......（我在本地服务器上工作）
There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it? I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S
div 标签之间有一个无法解释的空间，我无法删除它，这让我发疯......请有人告诉我如何删除它？我已经尝试添加一个负的顶部边距，但根据我以前的经验，这不是一个解决方案......通常将边距和填充设置为 0 就足够了......不知何故现在它是不同的：S
回答by Spirit
I've finaly found the problem thanks to all of You but especialy thanks to Notepad++
感谢大家，我终于找到了问题，但特别感谢 Notepad++
The problem was caused by the invisible blank spaces (from the SPACE key).I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.
该问题是由不可见的空格（来自 SPACE 键）引起的。我不知道为什么，但根据我的知识，这是浏览器第一次检测到多个空格笔划。我猜现在较新的浏览器正在注册多个空格。
I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.
我刚刚用 Notepad++ 打开了 html 脚本，并从 View->Show Simbol->Show All Characters 设置。然后我删除了所有不必要的空白空间，这解决了我的问题。
回答by clairesuzy
div {line-height: 1;}
h1, p {margin: 0;}
don't use units for your line height, see: Unitless line-heightsfor more information,
不要为您的行高使用单位，请参阅：无单位行高了解更多信息，
if you simply put 1.4then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example
如果您简单地放置，1.4那么行高将是1.4 x the font-size，这应该可以帮助您控制间隙，显然我上面的代码示例绝对为零，这只是一个示例
JSFiddle : HERE
JSFiddle：这里
回答by Martin Taleski
In top of your CSS file just paste this
在你的 CSS 文件的顶部粘贴这个
* { margin: 0; padding: 0; }
* { margin: 0; padding: 0; }
Hope this helps.
希望这可以帮助。
回答by SharkTheDark
<div class="clear_both" /> </div>
This is creating you a white space between Heading 1 and Here goes the main menu...
这是在标题 1 和主菜单之间创建一个空白区域...
DIVs comes one below other if you have them "display: block", so even if this div don't have text, it has empty space " "...
如果你有“显示：块”，DIV 就会在另一个之下，所以即使这个 div 没有文本，它也有空白空间“”......
If you delete this, all other will be like text below...
如果您删除此内容，所有其他内容将类似于下面的文字...
Sorry if I understand something wrong... ;)
对不起，如果我理解错了......;）
回答by Jaspero
div {line-height: 1.4em;}should be the culprit.
div {line-height: 1.4em;}应该是罪魁祸首。
回答by G Jeny Ramirez
on your DIV or image use:
在您的 DIV 或图像上使用：
.div
{
display: inline-block;
padding:0;
margin:0;
}
and on body use:
和身体使用：
body
{
padding:0;
margin:0;
}
I had the same problem and this worked just fine for me I just got it fixed! Hope this helps anyone searching for an answer.
我遇到了同样的问题，这对我来说很好用，我刚把它修好！希望这可以帮助任何寻找答案的人。
回答by nirvanastack
Div comes with blank spaces whenever used. In order to remove them
Div 每次使用时都带有空格。为了去除它们
Use
用
margin-top: -10px
or whatever is convenient to your page setup.
或任何方便您的页面设置。
