尽管设置了margin:0和padding:0，页面顶部出现间隙

Question

尽管设置了margin:0和padding:0，页面顶部出现间隙

16

尽管我将边距和填充设置为0，但我的网站顶部有32像素的间隙。我知道是32像素，因为我可以通过padding: -32px来解决它。但这样底部就会出现空白！在Firebug中，似乎body元素从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 是容器横幅，其下是包含内容的容器。

- MrB

请不要在问题标题中写标签。 - Lightness Races in Orbit

你说的标签是什么意思？Leading CSS是什么？那只是为了表明主题。 - MrB

正确。这个主题由问题标签指示，存在的目的是为我们在留言板上做的事情提供一致且可索引的机制（即在标题中编写标签）。 - Lightness Races in Orbit

我尝试将您的样式放入一个简单的HTML文档中，其中包含您提到的2个div，但是我放置在.container_banner中的任何文本都从我的浏览器顶部开始（没有间隙）。您能否发布一些显示此问题的HTML？另外：它是否在所有浏览器中发生，还是只在特定浏览器中发生？ - Jeroen

Chrome和Firefox。我会尝试创建其中一个fiddle。 - MrB

这是在搜索此问题时出现的第一个谷歌结果，因此对于任何即使边框、边距、填充等设置为0仍然存在此问题的人，我有一个最后的建议：将您的代码复制到Notepad++中的空白文件中，单击“编码”>“以UTF-8无BOM编码”，并将其保存到现有文件中。 BOM编码已经让我吃过亏了不止一次。 - orfdorf

7个回答

4

WordPress会使用wp_head()自动添加管理工具栏；也许你和我已经删除了管理工具栏，使其变为空白，但如果我们留下了管理工具栏的详细信息，它将会显示。

在你的functions.php中添加以下代码以将其移除：

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

- user846606

这是正确的方法！它可以移除顶部的管理面板以及它产生的间隙。谢谢！ - Thomas Solti

1

我不太确定你的意思，但我想你的问题可能要么是由于一些无效的HTML（确保你使用正确的文档类型），要么是由于你的container类中的padding-top: 20px;规则。

- Graham Clark

这是要移除容器顶部和容器之间的间隙。如果我移除它，顶部的间隙仍然存在。 - MrB

1

我遇到了完全相同的问题。

我解决这个问题的方式（至少目前为止）是使用：

* {
    margin-top: 0;
}

在我的样式表顶部。

这将所有元素的顶部边距设置为零，因此在使用时请理解此点，并且可能需要不断定义'margin-top'属性。

Sam

- Sam

1

我的问题是：一个H2 HTML标签作为DIV的第一个子标签，导致DIV顶部出现了间隙。

我会期望使用CSS的'margin(-top)'属性产生这样的间隙。但是，DIV没有（继承的）"margin(-top)" CSS属性。

删除H2子元素可以消除意外的间隙，但并不是一个好的解决方案。

真正解决问题的方法是将CSS属性"display"设置为'inline-block'。然后你就可以使用H2（或Hx）而不会出现不需要的间隙。

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

我希望这个答案能解决你的问题！

- Vincent

0

或者，你的CSS中有一个错误，color #666666。中间没有:。可能会导致CSS被错误地解析。

- Starx

0

如果此div位于body内（例如或任何其他div），请将margin和padding设置为0像素；这样应该能正常工作。

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

它应该修复它

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

- user8765020

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James · Accepted Answer

我认为这是由于使用了position: relative，并且您的h1元素默认继承了一个margin而导致的。当您使用position：relative时，似乎margin没有随着实际内容移动而被调整，因此会应用到页面顶部。

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

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

如果存在其他设置为position:relative并带有margin的元素（如h3标签），您可能需要对它们执行相同的操作。

最好减少使用position:relative，因为这种行为有些难以预测。