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%;
}

Container banner是最顶层的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标记）

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

Answer 2

WordPress使用wphead()自动添加管理栏;你和我可能以某种方式删除了管理栏的东西，所以它只是显示为空，但如果我们离开了管理栏的详细信息，它就会在那里。

将它添加到你的functions.php中以摆脱它：

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

Answer 3

我不太清楚你的意思，但我想你的问题要么归结为某些无效的HTML（确保你使用的是正确的doctype），要么padding-top: 20px;规则在{ {1}}上课。

Answer 4

我的问题是：一个H2 html标签，它是DIV的第一个子标签，在div之上造成了一个缺口。

我期望使用css'margin（-top）'属性。但DIV没有（继承）“margin（-top）”CSS属性。

删除H2孩子消除了意外的差距，但不是一个好的解决方案。

真正解决问题的是将DIV的CSS属性“display”设置为“inline-block”。因此，您可以使用H2（或Hx）而不会产生不必要的间隙。

<div style="display:inline-block">
  <h2>blabla</h2>
</div>

我希望这是解决问题的答案！

Answer 5

或者，您的CSS中有错误color #666666。两者之间没有:。可能是导致以错误的方式解析CSS。

Answer 6

如果这个div是insine body（例如，或者任何其他div），则为0px设置margin和padding;而它应该好好的

<body>
<div class="div_with_gap">
</div>
</body>

它应该修复它

body{
margin: 0px;
padding: 0px;}

Answer 7

我一直有同样的问题。

我解决它的方式（至少现在）是使用：

* {
    margin-top: 0;
}

位于我的样式表的顶部。

这会将每个元素的上边距设置为零，因此请在理解之后使用，并且可能需要一次又一次地定义'margin-top'属性。

萨姆

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

7 个答案: