是什么导致零边距的多余空间？

Question

我有一个基本的模板，它以最小的CSS开始。我已将padding和margin设置为0，但body右边有少量空白。这是重要的CSS：

:root {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: Helvita, Arial, sans-serif;
  background-color: $no-flash-white;
}

这是开发工具在检查body时显示的内容，在这里我们可以看到用户代理样式被覆盖：

尽管如此，即使是像here那样的全局重置，这也是我似乎无法覆盖的结果：

我如何在这里识别出罪魁祸首？最简单的解决方法是什么？

Answer 1

您要显示的不是边距，而是滚动条。这就是在台式机设备上的外观。尽管根据操作系统的不同，通常在Chrome上的像素为17像素。

对于滚动机制的大小，颜色或行为，或者是否应该在视口内部或外部进行绘制，没有W3C建议。因此，它完全是浏览器领域。更糟的是，大多数浏览器在基于点击的设备上绘制的内容与在基于触摸的设备上绘制的内容不同。

---

以上是我的答案，但是，如果您对滚动条有更多兴趣，请参考以下几点：

在过去的几年中，Firefox在桌面上选择了与在移动设备上相似的行为，即使滚动条透明，在页面本身上绘制并仅在悬停或发生滚动时显示。

尽管这似乎是一个好主意（页面始终具有相同的大小，而不管滚动条的存在），但从技术上讲，它会在其绘制的整个区域上禁用指针事件，这一直是技术纯粹主义者的主要论点

在页面上绘画（例如Chrome在台式机上）可能是最大的问题，就是您无法将其与页面集成，例如

::-webkit-scrollbar {
   background-color: transparent;
}

...导致其为白色（这是浏览器的背景，而不是页面的背景）。

控制跨浏览器/跨设备的滚动机制外观的唯一实用解决方案是完全禁用滚动条机制，然后从头开始或使用专用库构建自己的滚动库，这些库始终由HTML元素构建。它们倾向于在移动设备上失败或运行不佳，因此建议禁用您正在使用的任何库。

还应注意，任何此类自定义解决方案都具有很高的性价比（滚动可触发高达100次/秒）。通过节流可以提高性能，但代价是页面无法对指针更改做出如此迅速的响应（和/或滚动条重新绘制，并延迟了滚动事件）。体面的滚动库确实指出了这一点。

如果您想使用自定义的Webkit滚动条here's something，它们会发布在他们的博客上。