尽管页边距为0，填充为0，但页面顶部的空白 [英] Gap at top of page despite margin:0 and padding: 0

问题描述

我的网站顶部有32px的间隙，尽管将边距和填充设置为0.我知道它是32px，因为我可以用填充来解决它:-32px.但是然后我在底部有一个缺口！在Firebug中，即使我将边距和填充设置为0，正文也只能从HTML元素的开头向下32px处开始.

There's a 32px gap at the top of my site, despite setting margins and paddings to 0. I know it's 32px because I can fix it with padding: -32px. But then I have a gap at the bottom! In Firebug, it seems the body only start 32px down from the beginning of the HTML element, even though I've set margins and paddings to 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，其后是容器(其中包含内容).

Container banner is the topmost div, followed by container (which includes content).

推荐答案

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

I think this is caused by the use of position: relative and your h1 element inheriting a margin by default. When you use position: relative, the margin does not seem to be shifted with the actual content and therefore gets applied to the top of the page.

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

I have changed the relevant CSS to fix this:

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

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

You may need to do the same for any other elements that are set to position: relative and have a margin (e.g. h3 tags)

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

It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.

这篇关于尽管页边距为0，填充为0，但页面顶部的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！