Question

当我在 Chrome devtools （设备工具栏，响应式）中检查以下代码并且窗口的宽度小于1040px时，＆＃34; .wrapper＆＃34;突然得到一个增加的右边距，直到60px。

我真的无法理解为什么会有这个余地。任何人都可以解释这种行为或推动我朝着正确的方向前进吗？

我的HTML- / CSS代码：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

行＆＃34;保证金：0自动;＆＃34; 实际上意味着没有垂直边距并且自动地展开水平边距＆＃34;：这意味着你的＆＃34;包装器的左右两侧将有相同的边距。填写超过1040 px的内容。

Answer 2

我很肯定这与应用的浏览器默认样式有关。尝试使用带有代码的normalize或css重置文件，看看样式是否仍然应用。

60px的保证金来自哪里？

2 个答案: