CSS：如何摆脱默认窗口“填充”？设置为 100% 宽度的元素不会到达窗口的边框
Posted
技术标签:
【中文标题】CSS：如何摆脱默认窗口“填充”？设置为 100% 宽度的元素不会到达窗口的边框【英文标题】：CSS: How can I get rid of the default window "padding"? An element set to 100% width doesn't reach the window's borders 【发布时间】：2011-06-01 23:54:49 【问题描述】：所以我有一个直接放在 body 内的元素：
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
以下是使用的CSS：
body
text-align:center;
#header
margin:auto;
所以#header div 设置为 100% 宽度（默认）并居中。问题是，窗口边框和#header 元素之间有一个“空格”......就像：
| |----header----| |
^window border ^window border
我尝试使用 javascript 对其进行调整，它成功地将元素调整为确切的窗口宽度，但它并没有消除“空格”：
$('#header').width($(window).width());
一种解决方案似乎是添加以下 CSS 规则（并保留上面的 javascript）：
#header
margin:auto;
position:relative;
top:-8px;
left:-8px;
在我的浏览器中，这个“空间”是 8px - 但我不确定所有浏览器是否都一样？我在 Ubuntu 上使用 Firefox...
那么摆脱这个空间的正确方法是什么 - 如果它是我上面使用的，那么所有浏览器的行为都一样吗？
【问题讨论】：
【参考方案1】：body 在所有浏览器上都有默认边距，所以您只需将它们剃掉即可：
body
margin: 0;
text-align: center;
然后您可以从#header 中删除负边距。
【讨论】：
哦，天哪，我试图删除主体填充，但我没有想到边距......我认为主体与窗口是一样的，并且它们的“限制”在哪里在同一个地方...我不知道这是否可以理解。^^ 无论如何谢谢！ @Alex：与浏览器视口（可以这么说）更相关的元素是html，而不是body。查看this answer 了解更多信息。【参考方案2】：
解决这个问题的一个简单方法是去掉所有的边距。您可以通过以下代码做到这一点：
*
margin:0;
这将解决问题并让您更好地控制所有元素的边距。
【讨论】：
需要注意的是，这是一个矫枉过正的解决方案，在某些情况下可能会很慢。【参考方案3】：将这些添加到body 中的style 标记中，如下所示：
body margin:0px; padding:0px;
它对我有用。祝你好运！！
【讨论】：
【参考方案4】：我发现即使将 BODY MARGIN 设置为零，此问题仍然存在。
但事实证明有一个简单的解决方法。你需要做的就是给你的 HEADER 标签一个 1px 的边框，以及将 BODY MARGIN 设置为零，如下所示。
body margin:0px;
header border:1px black solid;
不知道为什么会这样，但我使用的是 Chrome 浏览器。显然你也可以改变边框的颜色来匹配你的标题颜色。
【讨论】：
以上是关于CSS：如何摆脱默认窗口“填充”？设置为 100% 宽度的元素不会到达窗口的边框的主要内容，如果未能解决你的问题，请参考以下文章
当 CSS 中存在填充时，如何使 TextArea 的宽度为 100% 而不会溢出？
HTML & CSS：如何创建四个相同大小的标签，填充 100% 宽度？