Html 如何删除div和页面顶部之间的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19815535/
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 do I remove the space between div and top of page?
提问by user2630210
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
这可能已经被问了一百万零一次，但如果有人能向我解释 div 的行为，我将不胜感激。
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
我有一个容器 div，我将它对齐在页面的中心，页面顶部和顶部之间有一个间隙。我希望它与页面顶部齐平。我假设我需要删除某种边距或填充，但我想不出它可能是什么。即使 div 中没有任何内容，仍然存在差距。
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddleto give you an idea of what I mean.
这是一个 JSFiddle，可以让您了解我的意思。
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
有人可以解释为什么 div 被按原样向下推吗？是否有一个强大的解决方案，不会影响放在 div 中的任何内容？
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
注意：如果屏幕宽度小于 div 宽度，则左侧也会有一个间隙。
回答by DaniP
You need to reset the default margin of the bodythat is 8px aprox.
您需要重置body大约 8px的默认边距。
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
演示http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
默认情况下，所有元素都有一些属性：
http://www.w3.org/TR/CSS21/sample.html
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
您可以在自己的 css 中重置它。
回答by Code Maverick
You could use a star selector and reset everything so that you can set everything yourself:
您可以使用星形选择器并重置所有内容，以便您可以自己设置所有内容：
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSSvia Google CDN.
或者，如果您想使用主重置样式表，您可以通过 Google CDN使用 Jonathan Neal 的Normalize CSS。
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
Normalize.css 是一个可定制的 CSS 文件，它使浏览器能够更一致地呈现所有元素并符合现代标准。我们研究了默认浏览器样式之间的差异，以便仅精确定位需要规范化的样式。
Just put this in your head:
把这个放在你的脑海里：
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
回答by Ari
It can also been caused by line-heightproperty.
So set the line-heightto as you wish!
它也可能是由line-height财产引起的。所以line-height按照你的意愿设置为！
回答by Harry
Add margin: 0px;to bodylike below. The reason is because bodyby default introduces a margin.
margin: 0px;在body下方添加喜欢。原因是因为body默认情况下引入了边距。
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
