Question

这可能已被问过一百万次，但如果有人能向我解释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;
}

Here is a JSFiddle让你知道我的意思。

有人可以解释为什么div被推倒了吗？是否有一个强大的解决方案，不会影响div中的任何内容？

注意：如果屏幕宽度小于div宽度，左侧也会有间隙。

Answer 1

您需要重置8px aprox body的默认边距。

body,html {
  margin:0;
  padding:0;
}

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

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

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

您可以在自己的css中重置此内容。

Answer 2

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

* { margin: 0; padding: 0; border: none; }

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

Normalize.css是一个可自定义的CSS文件，可以使浏览器全部呈现元素更加一致，符合现代标准。我们研究过默认浏览器样式之间的差异，以便精确定位只有需要规范化的样式。

把它放在脑海中：

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

Answer 3

将margin: 0px;添加到body，如下所示。原因是因为body默认会引入边距。

body{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
    margin: 0;
}

Demo Fiddle

Answer 4

它也可能由line-height属性引起。所以根据需要设置line-height！

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

4 个答案: