css - 尽管空白:0和空白:0

尽管将边距和填充设置为0，但我的网站顶部还是有32px的间隙。我知道它是32px，因为我可以使用填充来修复它:-32px。但是然后我在底部有一个缺口!在Firebug中，即使我已将边距和填充设置为0，但正文似乎仅从HTML元素的开头开始向下32px。

这是我的CSS:

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #a7a9ac;
  color #666666;
  background-image: url('body-bg.gif');
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  margin: 0;
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
}

.container_banner h3{
  position: relative;
  top: 0px;
  left: 32px;
  font-size: 10px;
  color: #F8F8F8;
}

.container_banner{
  position: relative;
  top: 0px;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 945px;
  height: 188px;
  padding: 0px;
  background-color: #ffffff;
}

.container{
  position: relative;
  top: 0px;
  margin: 0 auto;
  min-height: 100%;
  width: 945px;
  padding: 0px;
  padding-top: 20px;
  margin-bottom: 0px;
  background-color: #ffffff;
  background-image: url('thin-background.png');
}

.content{
  margin-top: 0px;
  margin-left: 30px;
  min-height: 100%;
}

容器标语是最上面的div，然后是容器(包括内容)。

最佳答案

我认为这是由于使用位置引起的:相对和您的h1元素默认继承了边距。当您使用position:relative时，页边距似乎并没有随着实际内容移动，因此被应用到页面顶部。

我更改了相关的CSS来解决此问题:

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

您可能需要对其他所有设置为position的元素进行相同操作:relative并有一个边距(例如h3标签)

最好减少相对位置的使用，因为很难预测这种行为。