16

尽管将边距和填充设置为 0，但我的站点顶部仍有 32 像素的间隙。我知道它是 32 像素，因为我可以使用填充来修复它：-32 像素。但是我在底部有一个缺口！在 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，然后是容器（包括内容）。

4

7 回答 7

19

我认为这是由于使用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 标签）的任何其他元素执行相同操作

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

于 2011-05-06T09:18:41.850 回答
4

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

将此添加到您的 functions.php 以摆脱它：

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
于 2011-12-28T02:11:26.813 回答
1

我不太清楚你的意思，但我想你的问题要么归结为一些无效的 HTML（确保你使用的是正确的 doctype），要么是padding-top: 20px;你container班级中的规则。

于 2011-05-06T09:00:48.203 回答
1

我的问题是：一个 H2 html 标记，它是 DIV 的第一个子标记，导致 div 顶部出现间隙。

我期望使用 css 'margin(-top)' 属性的这种差距。DIV 没有（继承的）“margin(-top)”CSS 属性。

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

真正解决问题的方法是将 DIV 的 CSS 属性“显示”设置为“内联块”。然后，您可以使用 H2（或 Hx）而没有不需要的间隙。

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

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

于 2013-04-20T17:12:33.643 回答
1

我一直有完全相同的问题。

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

* {
    margin-top: 0;
}

在我的样式表的顶部。

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

山姆

于 2015-08-22T02:53:27.583 回答
0

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

于 2011-05-06T09:05:36.210 回答
0

如果此 div 是 insine body（例如，或任何其他 div），则将边距和填充设置为 0px；它应该运作良好

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

它应该修复它

body{
margin: 0px;
padding: 0px;}
于 2017-10-12T12:00:28.130 回答