CSS:如何摆脱默认窗口"padding"？设置为100%宽度的元素不会到达窗口的边框

Question

所以我有一个直接放在体内的元素:

<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 ...

那么摆脱这个空间的正确方法是什么 - 如果它是我上面使用的,那么所有的浏览器都是一样的吗？

Answer 1

body 在所有浏览器上都有默认边距,因此您需要做的就是将它们删除:

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

然后,您可以从中删除负边距#header.

@Alex:与*浏览器视口*(可以这么说)更相关的元素是`html`,而不是`body`.看看[这个答案](http://stackoverflow.com/questions/4565942/should-global-css-styles-be-set-on-the-html-element-or-the-body-element/4565959#4565959 )更多. (2认同)

Answer 2

解决这个问题的一个简单方法是摆脱所有边缘.您可以通过以下代码执行此操作:

* {
    margin:0;
}

这将解决问题,并可以更好地控制所有元素的边距.