Html CSS：如何摆脱默认窗口“填充”？设置为 100% 宽度的元素没有到达窗口的边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4570212/
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
CSS: How can I get rid of the default window "padding"? An element set to 100% width doesn't reach the window's borders
提问by Alex
So I have an element that is placed directly inside body:
所以我有一个直接放在 body 内部的元素：
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
以下是使用的 CSS：
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
因此，#header div 设置为 100% 宽度（默认）并居中。问题是，窗口边框和 #header 元素之间有一个“空间”......比如：
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
我尝试用 javascript 调整它，它成功地将元素调整到精确的窗口宽度，但它并没有消除“空间”：
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
一种解决方案似乎是添加以下 CSS 规则（并保留上面的 javascript）：
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
在我的浏览器中，这个“空间”是 8px - 但我不确定这是否在所有浏览器中都一样？我在 Ubuntu 上使用 Firefox ...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
那么摆脱这个空间的正确方法是什么 - 如果这是我上面使用的，所有浏览器的行为都一样吗？
回答by BoltClock
bodyhas default margins on all browsers, so all you need to do is shave them off:
body在所有浏览器上都有默认边距，所以你需要做的就是把它们刮掉：
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
然后，您可以从 中删除负边距#header。
回答by Bups
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
解决这个问题的一个简单方法是去掉所有的边距。你可以通过以下代码做到这一点：
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
这将解决问题，并使您可以更好地控制所有元素的边距。
回答by Tharindulucky
Add these to the styletag in body, like the following one:
将这些添加到 中的style标记中body，如下所示：
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
它对我有用。祝你好运！！
回答by wardheed
I found this problem continued even when setting the BODY MARGIN to zero.
我发现即使将 BODY MARGIN 设置为零，这个问题仍然存在。
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
然而，事实证明有一个简单的解决方法。你需要做的就是给你的 HEADER 标签一个 1px 的边框，并将 BODY MARGIN 设置为零，如下所示。
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.
不知道为什么会这样，但我使用 Chrome 浏览器。显然，您也可以更改边框的颜色以匹配您的标题颜色。
