logo标签列表

如何去除 div 和页面顶部之间的空白？

csshtmlmargin
11

这个问题可能被问了无数遍，但如果有人能解释一下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;
}

这里是一个 JSFiddle，可以让你了解我想说的意思。

有人能解释一下为什么 div 被顶下去了吗？有没有一个稳定的解决方案不会影响放在 div 中的任何内容？

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

5个回答
20
7
你可以使用星号选择器并重置所有内容，以便你可以自己设置每个内容：
* { margin: 0; padding: 0; border: none; }

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

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

只需将此放入头文件中：

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
2
它也可能是由于"line-height"属性引起的。因此，将"line-height"设置为您所需的值！
1
将margin: 0px;添加到body中，如下所示。原因是因为body默认引入了边距。
body{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
    margin: 0;
}

演示 Fiddle

-1

我曾经遇到过类似的问题，通过设置负边距解决了它。你可以尝试下面的设置。

 #mainContent {... margin-top:-25px;}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接