如何删除div和页面顶部之间的空格? [英] How do I remove the space between div and top of page?
问题描述
这可能被问了一百万遍，但是如果有人可以向我解释div的行为，我将不胜感激.
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，该容器div在页面顶部和顶部之间有一个间隙.我希望它与页面顶部齐平.我以为我需要删除某种形式的边距或填充，但我不知道它可能是什么.即使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.
<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;
}
这是一个JSFiddle ，可让您了解我的意思.
Here is a JSFiddle to give you an idea of what I mean.
有人可以解释一下为什么div保持原状吗?是否有一个健壮的解决方案，不会影响div中放置的任何内容?
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宽度，则左侧也会有一个缝隙.
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
推荐答案
您需要重置body的默认边距，即8px aprox.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
演示 http://jsfiddle.net/H76bq/3/
The Demo http://jsfiddle.net/H76bq/3/
默认情况下，所有元素都具有一些属性:
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
您可以在自己的CSS中重置它.
You can reset this in your own css.
这篇关于如何删除div和页面顶部之间的空格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
