10

这可能已经被问了一百万次了，但如果有人可以向我解释 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 宽度，左侧也会有间隙。

4

4 回答 4

17

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

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

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

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

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

您可以在自己的 css 中重置它。

于 2013-11-06T15:06:45.707 回答
7

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

* { 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" />
于 2013-11-06T15:07:42.993 回答
1

margin: 0px;在下面添加body喜欢。原因是body默认情况下会引入一个边距。

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

演示小提琴

于 2013-11-06T15:07:30.597 回答
1

It can also been caused by line-height property. So set the line-height to as you wish!

于 2015-07-10T17:19:50.437 回答