这可能已经被问了一百万零一次,但如果有人能向我解释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 宽度,左侧也会有一个间隙。
重置body
的默认边距,即 8px aprox。
body,html {
margin:0;
padding:0;
}
演示 http://jsfiddle.net/H76bq/3/
默认情况下,所有元素都具有一些属性:
http://www.w3.org/TR/CSS21/sample.html
您可以在自己的 css 中重置此设置。
您可以使用星号选择器并重置所有内容,以便您可以自己设置所有内容:
* { margin: 0; padding: 0; border: none; }
或者,如果你想使用主重置样式表,你可以通过谷歌CDN使用Jonathan Neal的Normalize CSS。
规范化.css是一个可自定义的CSS文件,使浏览器呈现所有 元素更加一致并符合现代标准。我们研究了 默认浏览器样式之间的差异,以便精确定位 仅需要规范化的样式。
只要把这个放在你的脑海里:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
将margin: 0px;
添加到body
,如下所示。原因是body
默认引入边距。
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
演示小提琴
它也可能是由line-height
属性引起的。因此,根据需要设置line-height
!
我也有类似的问题,我通过设置负边距解决了它。您可以测试以下设置。
#mainContent {... margin-top:-25px;}