尽管边距为0且填充:0,但页面顶部有差距

Question

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

这是我的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,后面是容器(包括内容).

Answer 1

我认为这是由于使用position:relative和你的h1元素默认继承了一个边距.当您使用position:relative时,边距似乎不会随实际内容移动,因此会应用到页面顶部.

我已经更改了相关的CSS来解决这个问题:

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

您可能需要对设置为position的任何其他元素执行相同操作:relative并具有边距(例如h3标记)

最好减少相对位置的使用,因为有些难以预测这种行为.