60px邊距從哪裏來？

-3

當我在Chrome devtools中檢查以下代碼（設備工具欄，響應）並且窗口的寬度小於1040px時，「.wrapper」會突然增加右邊距，直到60px。60px邊距從哪裏來？

我真的不明白爲什麼它會得到這個餘量。任何人都可以解釋這種行爲或將我推向正確的方向嗎？

我HTML-/CSS-代碼：

body { 
 
    background-color: grey; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    width: 1040px; 
 
    margin: 0 auto; 
 
    background-color: red; 
 
} 
 

 
header[role="banner"] { 
 
    background-color: #fff; 
 
    padding: 20px 0; 
 
}

<header role="banner"> 
 
    <div class="wrapper"> 
 
    <h1>Headline</h1> 
 
    </div> 
 
</header>

來源

2017-03-22 marklasort

我沒有看到任何奇怪的東西。 .wrapper會溢出正文（默認爲窗口大小的100％），因爲您指定了絕對寬度。此外，由於溢出，存在負邊界右邊（邊距：0自動）。你試圖完成什麼？你在原來的問題中沒有說過。 – laurentius

您正在確定元素**必須具有「1040px」的寬度。如果您的屏幕較小，則該元素將溢出。由於您將水平邊距設置爲'auto'，因此負邊距僅僅是補償視口寬度和元素寬度之間的差異。 – LcSalazar

-1

我肯定這是與所應用的瀏覽器默認的樣式做的。嘗試在代碼中使用normalize或css重置文件，並查看該樣式是否仍然適用。

來源

2017-03-22 14:23:17

已爲您更新答案。 –

很確定沒有默認樣式在任意斷點之後開始向元素應用邊距。 – JJJ

就像我在評論中所說的那樣，我是積極的;） –

線「保證金：0汽車;」實際上意味着沒有垂直邊距和「自動」地攤水平邊距：這意味着將有在左邊，你的「包裝」的權利的平等保證金填寫什麼超越1040像素。

來源

2017-03-22 14:28:54

60px邊距從哪裏來？

回答

相關問題