Question

我试图在我的背景颜色之前和之后获得间距。我可以使用以下方法获得左侧间距：

header {
    background-color: #888888;
    position: relative;
    left: 60px;
    top: 3px;
}

但是，当我想通过添加right: 60px来向右添加间距时，它会忽略它并且颜色到达页面右侧。

感谢任何帮助。

Answer 1

使用margin而不是position: relative + top / right / left有什么用？

＆＃13;

header {
    background-color: #888888;
    margin: 3px 60px 0;
}

＆＃13;

<header>Header</header>

＆＃13;

关于MDN的left / right：

如果同时定义了right CSS属性和left CSS属性，则元素的位置过度指定。在这种情况下，当容器从左到右（即left计算值设置为right）和{{1}时，-left值具有优先权。当容器从右到左时（即right计算值设置为left），value具有优先权。

Answer 2

似乎你需要设置：

header{
    background-color: #888888;
    position: relative;
    width: calc(100vw - 120px);
    margin: 3px 60px 0 60px;
}

width: calc(100vw - 120px);的计算宽度等于视口宽度的100％减去120px。之后你只需要在左侧和右侧设置相等的边距（60px）

Answer 3

您似乎误解了left或right的功能。它不只是给你左或右空间，而是向左或向右移动/定位整个元素（标题）。它与财产position: relative密切相关。

在你的情况下，你只是将标题首先向右定位60px，然后将其向左定位60px，使其准确地返回到同一位置，因此没有看到间隙。这不是正确的方法。

相反，只需使用margin为您提供所需的空间：

header{
    ... left, right not needed ...

    margin: 0 60px 0 60px;

    ...
}