如何删除div和页面顶部之间的空格?

use*_*210 10 html css margin

这可能已被问过一百万次,但如果有人能向我解释div的行为,我将不胜感激.

我有一个容器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;
}
Run Code Online (Sandbox Code Playgroud)

这是一个JSFiddle,让您了解我的意思.

有人可以解释为什么div被推下来了吗?是否有一个强大的解决方案,不会影响任何放在div中的内容?

注意:如果屏幕宽度小于div宽度,则左侧也会有间隙.

Dan*_*niP 13

您需要重置body8px aprox 的默认边距.

body,html {
  margin:0;
  padding:0;
}
Run Code Online (Sandbox Code Playgroud)

演示http://jsfiddle.net/H76bq/3/

默认情况下,所有元素都有一些属性

http://www.w3.org/TR/CSS21/sample.html

你可以在你自己的CSS中重置它.


Cod*_*ick 7

您可以使用星形选择器并重置所有内容,以便您可以自己设置所有内容:

* { margin: 0; padding: 0; border: none; }
Run Code Online (Sandbox Code Playgroud)


或者,如果您想使用主重置样式表,您可以通过 Google CDN使用 Jonathan Neal 的Normalize CSS

Normalize.css 是一个可定制的 CSS 文件,它使浏览器能够更一致地呈现所有元素并符合现代标准。我们研究了默认浏览器样式之间的差异,以便仅精确定位需要规范化的样式。

把这个放在你的脑海里:

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Run Code Online (Sandbox Code Playgroud)