html – CSS:如何摆脱默认窗口“padding”?设置为100%宽度的元素未到达窗口的边框

前端之家收集整理的这篇文章主要介绍了html – CSS:如何摆脱默认窗口“padding”?设置为100%宽度的元素未到达窗口的边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我有一个直接放在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

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

解决方法

身体在所有浏览器上都有默认的边距,所以你需要做的只是刮胡子:
body {
    margin: 0;
    text-align: center;
}

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

猜你在找的HTML相关文章