CSS 尽管边距：0 和填充：0，但页面顶部仍有间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5909038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gap at top of page despite margin:0 and padding: 0
提问by MrB
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.
尽管将边距和内边距设置为 0，但我的网站顶部仍有 32 像素的间隙。我知道它是 32 像素，因为我可以使用内边距来修复它：-32 像素。但后来我在底部有一个缺口！在 Firebug 中，尽管我已将边距和填充设置为 0，但正文似乎仅从 HTML 元素的开头向下 32px 开始。
Here's my CSS:
这是我的 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 is the topmost div, followed by container (which includes content).
容器横幅是最上面的 div，其次是容器（包括内容）。
回答by James
I think this is caused by the use of position: relativeand 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.
我认为这是由使用position: relative引起的，并且您的 h1 元素默认继承了边距。当您使用 position:relative 时，边距似乎不会随实际内容移动，因此会应用于页面顶部。
I have changed the relevant CSS to fix this:
我已经更改了相关的 CSS 来解决这个问题：
.container_banner h1{
font-size: 48px;
position: relative;
top: 130px;
left: 250px;
width: 400px;
margin-top: 0;
}
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)
您可能需要对设置为 position:relative 并具有边距（例如 h3 标签）的任何其他元素执行相同操作
It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.
最好减少使用位置相对，因为预测这种行为有点困难。
回答by Pyjammez
WordPress automatically adds in an admin bar using wphead(); You and I have probably somehow deleted the admin bar stuff so it just appears empty, but if we had of left the admin bar details it'd be there.
WordPress 使用wphead();自动添加到管理栏中。你和我可能以某种方式删除了管理栏的内容，所以它看起来是空的，但如果我们离开了管理栏的详细信息，它就会在那里。
Add this to your functions.php to get rid of it:
将此添加到您的functions.php以摆脱它：
function my_function_admin_bar(){
return false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
回答by Vincent
My problem WAS : a H2 html tag, which was the first child tag of a DIV, caused a gap on top of the div.
我的问题是：一个 H2 html 标签，它是 DIV 的第一个子标签，导致 div 顶部出现间隙。
Such gap I would expect using the css 'margin(-top)' property. The DIV had no (inherited) "margin(-top)" CSS property though.
这种差距我希望使用 css 'margin(-top)' 属性。尽管 DIV 没有（继承）“margin(-top)”CSS 属性。
Removing the H2 child removed the unexpected gap but is not a good solution.
删除 H2 子项删除了意外的差距，但这不是一个好的解决方案。
What truly solves the problem is setting CSS property "display" for the DIV to 'inline-block'. You can use the H2 (or Hx) without the unwanted gap as consequence then.
真正解决问题的是将 DIV 的 CSS 属性“display”设置为“inline-block”。您可以使用 H2（或 Hx）而不会产生不需要的间隙。
<div style="display:inline-block">
<h2>blabla</h2>
</div>
I hope this is the answer that solves your problem!
我希望这是解决您问题的答案！
回答by Graham Clark
I'm not quite sure what you mean, but I imagine your problem is either going to be down to some invalid HTML (make sure you are using a correct doctype), or the padding-top: 20px;rule in your containerclass.
我不太确定你的意思，但我想你的问题要么归结为一些无效的 HTML（确保你使用的是正确的 doctype），要么是padding-top: 20px;你container班级中的规则。
回答by Starx
Or, you have an error in your CSS, color #666666. There is not :between. May be that is causing the CSS to be parsed in the wrong way.
或者，您的 CSS 中有错误，color #666666. :之间没有。可能是导致 CSS 以错误的方式解析。
回答by user8765020
if this div was insine body (for example, or any othere div) set margin and padding for 0px; and it should wrok well
如果此 div 是正弦体（例如，或任何其他 div），则将边距和填充设置为 0px；它应该运行良好
<body>
<div class="div_with_gap">
</div>
</body>
and it should fix it
它应该修复它
body{
margin: 0px;
padding: 0px;}
回答by Sam
I have been having exactly the same issue.
我一直有完全相同的问题。
The way I have resolved it (at least for now) is by using:
我解决它的方式（至少现在）是使用：
* {
margin-top: 0;
}
at the top of my stylesheet.
在我的样式表的顶部。
This sets top margin of EVERY element to zero, so use with the understanding of this, and that defining the 'margin-top' property again and again may be required.
这会将每个元素的顶部边距设置为零，因此请在理解这一点的情况下使用，并且可能需要一次又一次地定义 'margin-top' 属性。
Sam
山姆
