標題間距向右？

Question

我試圖讓我的背景顏色之前和之後的空白到我的標題。我可以用得到的左側間距：

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

但是，當我要加入到right: 60px間距添加到右側，它只是忽略它，顏色到達頁面的右側。

任何幫助表示讚賞。

Answer 1

有什麼關於使用margin代替position: relative + top/right/left設置等於利潤率（60像素）？

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

<header>Header</header>

JSFiddle

從MDN關於left/right：

當兩個right CSS屬性和left CSS屬性被限定，該元件的位置是過分規定。在這種情況下，如果容器是從左到右（即right計算值設置爲-left），則left值的優先順序爲：當容器是從右到左時（），優先順序爲rightleft計算值設置爲-right）。

Answer 2

看來你需要設置：

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

width: calc(100vw - 120px);計算寬度等於視口寬度120像素減去100％。之後，你只需要在左側和右側

Answer 3

您似乎誤解了left或right的功能。它不只是給你左或右的空間，但移動/定位整個元素（標題）向左或向右。與酒店攜手position: relative。

在你的情況下，你只是將標題定位在右邊60px，然後將其定位到左邊60px，這會將其返回到完全相同的位置，因此不會出現間隙。這不是正確的做法。

，而不是僅僅使用margin給你，像這樣所需的空間：

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

    margin: 0 60px 0 60px; 

    ... 
}