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边距从哪里来？

回答

相关问题