html – CSS：如何摆脱默认窗口“padding”？设置为100％宽度的

发布时间：2020-12-14 21:49:12 所属栏目：资源来源：网络整理

导读：所以我有一个直接放在body内的元素： body div id="header"Some stuff.../div Other stuff.../body 以下是使用的CSS： body{ text-align:center;}#header{ margin:auto;} 所以#header div设置为100％宽度(默认)，并且居中。问题是，窗口边框和#header元素之

所以我有一个直接放在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中删除负边距。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!