这可能已被问过一百万次,但如果有人能向我解释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中重置它.
您可以使用星形选择器并重置所有内容,以便您可以自己设置所有内容:
* { 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)