Html CSS：我如何摆脱默认窗口；填充“；？设置为100%宽度的元素不会'；t够不着窗户'；边界_Html_Css_Position_Width_Padding

Html CSS：我如何摆脱默认窗口；填充“；？设置为100%宽度的元素不会'；t够不着窗户'；边界

html css

Html CSS：我如何摆脱默认窗口；填充“；？设置为100%宽度的元素不会'；t够不着窗户'；边界,html,css,position,width,padding,Html,Css,Position,Width,Padding,所以我有一个直接放在身体内部的元素： <body> <div id="header">Some stuff...</div> Other stuff... </body> 因此#header div设置为100%宽度（默认值）并居中。问题是，在窗口边框和#header元素之间有一个“空格”。。。比如： | |----header----| | ^window border ^window border 我尝试

所以我有一个直接放在身体内部的元素：

<body>
    <div id="header">Some stuff...</div>
    Other stuff...
</body>

因此#header div设置为100%宽度（默认值）并居中。问题是，在窗口边框和#header元素之间有一个“空格”。。。比如：

|  |----header----|   |
^window border        ^window border

我尝试用javascript对其进行调整，它成功地将元素的大小调整为精确的窗口宽度，但并没有消除“空格”：

一种解决方案似乎是添加以下CSS规则（并保留上面的javascript）：

在我的浏览器中，这个“空间”是8px，但我不确定在所有浏览器中是否都是相同的？我正在Ubuntu上使用Firefox

那么，消除这个空白的正确方法是什么呢？如果这是我在上面使用的，那么所有浏览器的行为都是一样的吗？

body

在所有浏览器上都有默认的页边距，所以您只需将它们刮去：

body {
    margin: 0;
    text-align: center;
}

然后可以从

#header

中删除负边距，将其添加到

body

中的

样式

标记中，如下所示：

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

这对我有用。祝你好运

解决这个问题的一个简单方法是去掉所有的利润。您可以通过以下代码执行此操作：

* {
    margin:0;
}

这将解决问题，并使您能够更好地控制所有元素的边距

我发现即使将正文边距设置为零，这个问题仍然存在

然而，事实证明有一个简单的解决办法。你所需要做的就是给你的标题标签一个1px的边框，并将正文边距设置为零，如下所示

body { margin:0px; }

header { border:1px black solid; }

不知道为什么会这样，但我用的是Chrome浏览器。显然，您也可以更改边框的颜色以匹配标题的颜色。

哦，天哪，我试图去除车身衬垫，但我没有想到边距。。。我认为身体和窗户是一样的，它们的“极限”在同一个地方。。。我不知道这是否可以理解。^^无论如何，谢谢@亚历克斯：与浏览器视口（可以说）更相关的元素是

html

，而不是

body

。查看更多信息。应该注意的是，这是一个杀伤力过大的解决方案，在某些情况下可能会很慢。

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

* {
    margin:0;
}

body { margin:0px; }

header { border:1px black solid; }