css - 尽管有边距 :0 and padding: 0，页面顶部仍有间隙

Question

尽管将边距和填充设置为 0，但我的网站顶部仍有 32 像素的间隙。我知道它是 32 像素，因为我可以使用填充修复它:-32 像素。但是我在底部有一个缺口!在 Firebug 中，正文似乎仅从 HTML 元素的开头向下 32 像素开始，即使我已将边距和填充设置为 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 标签)

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